Expand my Community achievements bar.

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>