How do I replace css background url with @html.Sitecore().field("Header Image")

Question

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

.microsite-banner{
            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

 <script>


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

    </script>

Answer 1

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:

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

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.