[opencms-dev] cms:img as background-image in inline style (9.5.x)

[Lichterfeld, Sven]

Hey Chris,

I don’t know how you can do this as a background-image, but If I got it right, you like to have the image as the background of the whole box?.

So only solution in my mind is, set the image back as a foreground image after the div “box-wrap” , then give the class box-wrap a relative position and the image a absolute position.
If the image should always have the width of the Box, set also  “width: 100%” to the image style.

<%@page buffer="none" session="false" trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="cms" uri="http://www.opencms.org/taglib/cms"<http://www.opencms.org/taglib/cms>%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"<http://java.sun.com/jsp/jstl/core>%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"<http://java.sun.com/jsp/jstl/fmt>%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"<http://java.sun.com/jsp/jstl/functions>%>
<cms:formatter var="content">
            <div class="box-wrap" style="position: relative;” >
              <cms:img style=”position: absolute; width: 100%;” alt="${element.value.AltText}" src="${element.value.Image}" />
             <div class="box">
                <a href="<cms:link>${element.value.Link}</cms:link>">
                    <!-- <cms:img height="300" width="200" cssclass="aligncenter size-full" alt="${element.value.AltText}" src="${element.value.Image}" scaleType="2" /> -->
                    <p></p>
                    <h1>${element.value.Titel}</h1>
                </a>
                <p></p>
            </div>
            <div class="inner_box">
                <p>${element.value.Text}</p>
            </div>

</cms:formatter>

Hope this was a little help.

Best regards
_________________________________________

Sven Lichterfeld

forwerts solutions GmbH

Von: opencms-dev-bounces at opencms.org [mailto:opencms-dev-bounces at opencms.org] Im Auftrag von Christoph Kukulies
Gesendet: Freitag, 13. März 2015 12:15
An: The OpenCms mailing list
Betreff: [opencms-dev] cms:img as background-image in inline style (9.5.x)

I have some css that build an image on my page.
The formatter looks like this:

<%@page buffer="none" session="false" trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="cms" uri="http://www.opencms.org/taglib/cms"<http://www.opencms.org/taglib/cms>%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"<http://java.sun.com/jsp/jstl/core>%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"<http://java.sun.com/jsp/jstl/fmt>%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"<http://java.sun.com/jsp/jstl/functions>%>
<cms:formatter var="content">
            <div class="box-wrap" style="background-image:url(${element.value.Image})" >
             <div class="box">
                <a href="<cms:link>${element.value.Link}</cms:link>">
                    <!-- <cms:img height="300" width="200" cssclass="aligncenter size-full" alt="${element.value.AltText}" src="${element.value.Image}" scaleType="2" /> -->
                    <p></p>
                    <h1>${element.value.Titel}</h1>
                </a>
                <p></p>
            </div>
            <div class="inner_box">
                <p>${element.value.Text}</p>
            </div>

</cms:formatter>

The thing in question is the line in comments: <!-- <cms:img ...
That was a foreground image before and got positioned and scaled properly as long as it got included as a
<cms:img/>. But now I'm clueless what keywords can be used when I would like to position and scale the img as background-image.
How can this be done using direct editing and ADE?

 --
Chris Christoph P. U. Kukulies kukulies (at) rwth-aachen.de
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://webmail.opencms.org/pipermail/opencms-dev/attachments/20150313/a22e75ca/attachment.htm>