<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Generator" content="Microsoft Word 14 (filtered medium)">
<style><!--
/* Font Definitions */
@font-face
        {font-family:Calibri;
        panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
        {font-family:Tahoma;
        panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
        {margin:0cm;
        margin-bottom:.0001pt;
        font-size:12.0pt;
        font-family:"Times New Roman","serif";
        color:black;}
a:link, span.MsoHyperlink
        {mso-style-priority:99;
        color:blue;
        text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
        {mso-style-priority:99;
        color:purple;
        text-decoration:underline;}
p.MsoAcetate, li.MsoAcetate, div.MsoAcetate
        {mso-style-priority:99;
        mso-style-link:"Sprechblasentext Zchn";
        margin:0cm;
        margin-bottom:.0001pt;
        font-size:8.0pt;
        font-family:"Tahoma","sans-serif";
        color:black;}
span.E-MailFormatvorlage17
        {mso-style-type:personal-reply;
        font-family:"Calibri","sans-serif";
        color:#1F497D;}
span.SprechblasentextZchn
        {mso-style-name:"Sprechblasentext Zchn";
        mso-style-priority:99;
        mso-style-link:Sprechblasentext;
        font-family:"Tahoma","sans-serif";
        color:black;}
.MsoChpDefault
        {mso-style-type:export-only;
        font-size:10.0pt;}
@page WordSection1
        {size:612.0pt 792.0pt;
        margin:70.85pt 70.85pt 2.0cm 70.85pt;}
div.WordSection1
        {page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body bgcolor="white" lang="DE" link="blue" vlink="purple">
<div class="WordSection1">
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D">Hey Chris,<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D">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?.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D">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.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D">If the image should always have the width of the Box, set also  “width: 100%” to the image style.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:9.0pt;font-family:"Courier New""><%@page buffer="none" session="false" trimDirectiveWhitespaces="true"%><br>
<%@ taglib prefix="cms" uri=</span><span style="font-size:9.0pt;font-family:"Courier New""><a href="http://www.opencms.org/taglib/cms"><span lang="EN-US">"http://www.opencms.org/taglib/cms"</span></a></span><span lang="EN-US" style="font-size:9.0pt;font-family:"Courier New"">%><br>
<%@ taglib prefix="c" uri=</span><span style="font-size:9.0pt;font-family:"Courier New""><a href="http://java.sun.com/jsp/jstl/core"><span lang="EN-US">"http://java.sun.com/jsp/jstl/core"</span></a></span><span lang="EN-US" style="font-size:9.0pt;font-family:"Courier New"">%><br>
<%@ taglib prefix="fmt" uri=</span><span style="font-size:9.0pt;font-family:"Courier New""><a href="http://java.sun.com/jsp/jstl/fmt"><span lang="EN-US">"http://java.sun.com/jsp/jstl/fmt"</span></a></span><span lang="EN-US" style="font-size:9.0pt;font-family:"Courier New"">%><br>
<%@ taglib prefix="fn" uri=</span><span style="font-size:9.0pt;font-family:"Courier New""><a href="http://java.sun.com/jsp/jstl/functions"><span lang="EN-US">"http://java.sun.com/jsp/jstl/functions"</span></a></span><span lang="EN-US" style="font-size:9.0pt;font-family:"Courier New"">%><br>
<cms:formatter var="content"><br>
            <div class="box-wrap" style="position: relative;” ><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:9.0pt;font-family:"Courier New"">              <cms:img style=”position: absolute; width: 100%;” alt="${element.value.AltText}" src="${element.value.Image}" /><br>
             <div class="box"><br>
                <a href="<cms:link>${element.value.Link}</cms:link>"><br>
                    <!-- <cms:img height="300" width="200" cssclass="aligncenter size-full" alt="${element.value.AltText}" src="${element.value.Image}" scaleType="2" /> --><br>
                    <p></p><br>
                    <h1>${element.value.Titel}</h1><br>
                </a><br>
                <p></p><br>
            </div><br>
            <div class="inner_box"><br>
                <p>${element.value.Text}</p><br>
            </div><br>
<br>
</cms:formatter><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:9.0pt;font-family:"Courier New""><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:9.0pt;font-family:"Courier New"">Hope this was a little help.
<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D"><o:p> </o:p></span></p>
<div>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Arial","sans-serif"">Best regards
<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#FF7F00">_________________________________________<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:7.5pt;font-family:"Arial","sans-serif";color:gray">  
</span><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#FF7F00"><o:p></o:p></span></p>
<p class="MsoNormal"><b><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:gray">Sven Lichterfeld<o:p></o:p></span></b></p>
<p class="MsoNormal"><span style="font-size:7.5pt;font-family:"Arial","sans-serif";color:gray">   
</span><span style="font-size:10.0pt;font-family:"Arial","sans-serif";color:#FF7F00"><o:p></o:p></span></p>
<p class="MsoNormal"><b><span style="font-size:8.0pt;font-family:"Arial","sans-serif";color:gray">forwerts solutions GmbH</span></b><span style="font-size:8.0pt;font-family:"Arial","sans-serif";color:#FF7F00"><o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:8.0pt;font-family:"Arial","sans-serif";color:#FF7F00"><o:p> </o:p></span></p>
</div>
<div>
<div style="border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0cm 0cm 0cm">
<p class="MsoNormal"><b><span style="font-size:10.0pt;font-family:"Tahoma","sans-serif";color:windowtext">Von:</span></b><span style="font-size:10.0pt;font-family:"Tahoma","sans-serif";color:windowtext"> opencms-dev-bounces@opencms.org [mailto:opencms-dev-bounces@opencms.org]
<b>Im Auftrag von </b>Christoph Kukulies<br>
<b>Gesendet:</b> Freitag, 13. März 2015 12:15<br>
<b>An:</b> The OpenCms mailing list<br>
<b>Betreff:</b> [opencms-dev] cms:img as background-image in inline style (9.5.x)<o:p></o:p></span></p>
</div>
</div>
<p class="MsoNormal"><o:p> </o:p></p>
<div>
<p class="MsoNormal">I have some css that build an image on my page.<br>
The formatter looks like this:<br>
<br>
<span style="font-size:7.5pt;font-family:"Courier New""><%@page buffer="none" session="false" trimDirectiveWhitespaces="true"%><br>
<%@ taglib prefix="cms" uri=<a href="http://www.opencms.org/taglib/cms">"http://www.opencms.org/taglib/cms"</a>%><br>
<%@ taglib prefix="c" uri=<a href="http://java.sun.com/jsp/jstl/core">"http://java.sun.com/jsp/jstl/core"</a>%><br>
<%@ taglib prefix="fmt" uri=<a href="http://java.sun.com/jsp/jstl/fmt">"http://java.sun.com/jsp/jstl/fmt"</a>%><br>
<%@ taglib prefix="fn" uri=<a href="http://java.sun.com/jsp/jstl/functions">"http://java.sun.com/jsp/jstl/functions"</a>%><br>
<cms:formatter var="content"><br>
            <div class="box-wrap" style="background-image:url(${element.value.Image})" ><br>
             <div class="box"><br>
                <a href="<cms:link>${element.value.Link}</cms:link>"><br>
                    <!-- <cms:img height="300" width="200" cssclass="aligncenter size-full" alt="${element.value.AltText}" src="${element.value.Image}" scaleType="2" /> --><br>
                    <p></p><br>
                    <h1>${element.value.Titel}</h1><br>
                </a><br>
                <p></p><br>
            </div><br>
            <div class="inner_box"><br>
                <p>${element.value.Text}</p><br>
            </div><br>
<br>
</cms:formatter></span><br>
<br>
The thing in question is the line in comments: <!-- <cms:img ...<br>
That was a foreground image before and got positioned and scaled properly as long as it got included as a<br>
<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.<br>
How can this be done using direct editing and ADE?<br>
<br>
 -- <br>
Chris Christoph P. U. Kukulies kukulies (at) rwth-aachen.de <o:p></o:p></p>
</div>
</div>
</body>
</html>