Try our conversational search powered by Generative AI!

Html Editor: a background-image is not visible



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:

, but in this case, looking the page from a different browser (not logged in), the image is not visible as the url hasn't been converted into the correct one. That url is visible only for a logged administrator

Does anyone know what I could do?

Nov 12, 2015 17:43

What you need is this.  <div style="background-image: url(@Url.ContentUrl(Model.ImageContentReferenceHere))"/>


<div style="background-image: url(@UrlResolver.Current.Url(Model.ImageContentReferenceHere))"/>

Nov 13, 2015 18:48

thank you Joshua but can I put code into the HTML Editor? :)

Nov 16, 2015 14: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
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.