Expand my Community achievements bar.

Submissions are now open for the 2026 Adobe Experience Maker Awards.

Mark Solution

This conversation has been locked due to inactivity. Please create a new post.

SOLVED

How add Image as background

Avatar

Level 1

In the complex component, how to make the image as background image and the text as center align on the background image??

1 Accepted Solution

Avatar

Correct answer by
Level 10

It should be taken care in your CSS making image as background and text as center aligned for that div

View solution in original post

3 Replies

Avatar

Correct answer by
Level 10

It should be taken care in your CSS making image as background and text as center aligned for that div

Avatar

Level 1

bsloki wrote...

It should be taken care in your CSS making image as background and text as center aligned for that div

 

<%@include file="/libs/foundation/global.jsp"%>
<%@ page import="com.day.cq.wcm.foundation.Image" %>
<%

    Image image = new Image(resource, "image");

    image.setSelector(".img");

    String text = properties.get("text", "TEXT NA");


%>

    <%= text %>
<%
    image.draw(out);

%>
<%
   image.getDescription().length();
%>

 

 

i m using this code...how to have the css inside it

Avatar

Level 8

The image object has a getSrc() property.  You can switch your code up to utilize it:

<%

    Image image = new Image(resource, "image");

    image.setSelector(".img");

    String text = properties.get("text", "TEXT NA");


%>

    <%= text %>

<div style="background-image: url(<%=image.getSrc() %>);"></div>