Don't miss out Virtual Happy Hour this Friday (April 26).
Try our conversational search powered by Generative AI!
AI OnAI Off
Html Editor: a background-image is not visible
What you need is this. <div style="background-image: url(@Url.ContentUrl(Model.ImageContentReferenceHere))"/>
or
<div style="background-image: url(@UrlResolver.Current.Url(Model.ImageContentReferenceHere))"/>
Nov 13, 2015 18:48
Claudio, can't you just use the public url to the image? If not I guess you have to do your own parsing of the content and replace that URL.
Nov 16, 2015 14:59
hello Erik
Yes actually I must use the public url, written manually. It means the client can't choose it easily from the image button. Because sing the image button, it will put the private url of the image and not the pulic one. So The background would be visible only to cms administrators
Nov 16, 2015 15:03
I know, when using a background-image I would probably solve it in another way than an XhtmlString.
Nov 16, 2015 15:20
Sorry about that Claudio, The url should get re-written when you are not logged in. so when your logged in, you will see the "/EPiServer/CMS/Content/globalassets/it/picture.jpg,,72?epieditmode=False" but when your logged out, you will see "/globalassets/it/picutre.jpg". Just to clarify and cover all basis, when you logout, the image background disappears? or still has the wrong url?
Edited,
Nov 16, 2015 15:22
Another way you could do it is add a background propety to the pagetype of blocktype and then add the div yourself with the following code from the previous example. I think this approach is much easier for th editor and then the html is controlled by you
Nov 16, 2015 15:25
Hello
If I add an image using the correct button of the editor, the image comes out from media folder with this url: "/EPiServer/CMS/Content/globalassets/it/picture.jpg,,72?epieditmode=False".
Visiting that page from a browser not logged into episerver, the url of the image is different as it's like "/globalassets/picture.jpg", so it has been converted into a public url.
The problem comes when I need to write manually the html code of that content. Entering in the html code of the editor, I have to add a div tag with this inline style:
Does anyone know what I could do?