I am using Sitecore 8.2 and I am working with the RenderingModel. I have a template field called "Header Image" that I would like to render on my Layout. Here is the css

            background: url(../images/trees_banner_2.jpg)  no-repeat center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            background-attachment: scroll;
            position: relative;


Here is my markup:

 <div id="banner-nav-container" class="microsite-banner">

          <div class="home-banner-overlay"> </div>

          <div class="clearfix"></div>

          <div style="width: 100%;position:relative;">

and here is the code I thought might swap out the css image


        $('.microsite-banner').css("background", "url(@Html.Sitecore().Field("Header Image")");

  • It seems that the code for swapping the background is not correct. Try to add the new image url to a variable and then use the variable in the css. I assume you are loading a default image. I would recommend to do this in the markup directly instead of css. So, you can check if the image header is blank load the default one Jun 1 '17 at 20:40

The code @Html.Sitecore().Field("Header Image") will render a full image tag like:

<img src="~/media/imageid.ashx" alt="" />

For the background image, you need to get the Url of the image. For that you can use the MediaManager to generate the media asset url:

ImageField backgroundImage = (ImageField)Sitecore.Context.Item["Header Image"];
var imageUrl = Sitecore.Resources.Media.MediaManager.GetMediaUrl(imgField.MediaItem);

Now you can use that imageUrl to change the background image:

    $('.microsite-banner').css("background", "url(@imageUrl)");

Obviously that is very crude code and really you would want to get all that done in your controller and then populate a property on your view model with the Url, but it gives you a starting point.

  • Yes, I get that... the person I am working with is trying to use Sitecore out of the box ... meaning we will need to build a controller to process all of the item's data ... I think he thought we could get away with using the RenderingModel Jun 1 '17 at 21:34
  • 2
    Technically that code would work in a view rendering just using the RenderingModel - its just not good practice to do so.
    – Richard Seal
    Jun 1 '17 at 21:36
  • thank you, this worked and I didn't have to use a controller, that is my preference but this is a microsite and the content isn't expected to change in this part of the website, when we build the main site we are going to use more MVC specific components, and glass. Jun 2 '17 at 3:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.