How to make the background image of the main content editable in sitecore?

I am very new to site core and having trouble to figure out how to make the background image of the main layout editable? Will this involve using glass mapper?

  • That's a very open ended question. Can you give us some more details of your Sitecore implementation? What fields are available? Can you give us an example of the code that loads in the background image?

    If the image is being loaded on the Main Layout, then it is likely to be picked from a setting somewhere, or worse hard coded.

    With some more information, I'm sure we can help you out :)
  • In reply to Richard Seal:

    The main layout is a mvc view.
  • In reply to Pallavi Bhandari:

    Currently the view has a div tag with background image Css property setup to load the image in the background. I wanted to make it editable for the content editor. I uploaded the image to the media gallery, created a template with just the image field. Then I added an image item under the content item. I wasn't sure how to get the URL of the image and set it up as the background image in the mvc view for main layout.
  • In reply to Pallavi Bhandari:

    Post up your current code and I'll provide you a sample. You need to detect Page Mode and then output some different markup to make the image editable.
  • First, if you want to make an image editable you should never hard code the image tag (<img src=”PathToTheIamge” />). Instead, you should use a Sitecore control to render the image (see fx. stackoverflow.com/.../how-can-i-make-sitecore-showing-an-image-or-other-resources). In this way, Sitecore will make the image editable for an author, and furthermore Sitecore renders all the image properties added to the image.

    Secondly, as Richard Seal is writing, if the image should be loaded on the main layout as a background image displayed in all the pages of your website, you could create a setting item containing the background image among other data.
    Fx. In a simplified version, you will have a structure like this:

    - /Sitecore/content/home
    - /Sitecore/content/home/page 1
    - /Sitecore/content/home/page 2
    - /Sitecore/content/settings
  • For a background image you can display a editable field only in page edit mode.

    Use somethings like this:

    @if (IsInEditingMode)
    {
        <p>
            Background visual @RenderImage(m => m.Visual, isEditable: true)
        </p>
    }
    <div style="background-image: url(@Model.Visual.Src);">
    ....
    </div>
  • There are a few ways of doing this, but here is one.  Amend your homepage template to have an "Image" field called "Site background", then on your Home item select an image in the Site Background field from your media library.  You can then use code like this in your layout view.

    @{

    // get the home page item

    Item home = Sitecore.Context.Database.GetItem(Sitecore.Context.Site.StartPath);

    // get the image field that contains the background

    ImageField imageField = home.Fields["Site Background"];

    // get its url

    string url = Sitecore.Resources.Media.MediaManager.GetMediaUrl(imageField.MediaItem);

    }

    <body style="background-image:url(@url); background-repeat: repeat;">

    @if (Sitecore.Context.PageMode.IsPageEditor)

    {

    <div style="border: 2px dashed green; background:white; padding:10px;">

    Background image:<br/>

    @Html.Sitecore().Field("Site Background", home)

    </div>

    }

    Note I'm not saying the above code is "best practice", you'll need to do some null checking, put the code in a controller rather than on the view etc, this is just for demonstration purposes.  You might also want to do something nicer with the div that has the edit field inside it, like show it on mouseover, or you might not want it on the page at all and you might be happy setting the background image from the Content Editor.

  • In reply to jan bluemink:

    This works! However, is there any way to avoid creating a separate image field and use the div to edit the image? It works fine, but is it possible to achieve editing the div to change the background image?
  • The way you'd do that would probably be with an "Edit Frame". I know native edit frame support was dropped (missed out?) on SC7 using Razor, but there are code samples on the web showing how you can implement them in Razor, and I believe Glass Mapper (if you're using it) can create edit frames for you. I'm not sure if edit frames were dropped for a reason, I think there might have been performance concerns, but I think that would be the way of doing this purely via the Page Editor\Experience Editor without putting edit-only components on the page. If you google "Sitecore Edit Frames" you should find all the relevant info if you want to go that route.
  • In reply to Adrian Forbes:

    That was it! Thank you!

    @using (Html.Glass().BeginEditFrame())
    {
    <divclass="jumbotron" style="background-image: url('@Model.BackgroundImage.Src')">
    ...
    }
  • In reply to jan bluemink:

    Hi Jan,

    I am new to sitecore 8. I have to show the image as div background. We are using Glass mapper in the project.

    I have defined the property in the model as :


    [SitecoreField("Image")]
    public virtual Image Image { get; set; }

    and on cshtml page I am doing :

    <div style="background-image: url('@Model.Image.Src')">

    but my image is not getting displayed. In Html it is showing like :

    <div style="background-image: url(/sitecore/shell/~/media/default website/cover.ashx);" sc-part-of="placeholder rendering" class="scEnabledChrome">

    Please help
  • In reply to jan bluemink:

    Hi Jan,

    I am new to sitecore 8, I have implemented the background-image in the same way, but I am getting the background image as handler and it's not getting render in browser:

    <div style="background-image:url(/~/media/default website/cover.ashx);">

    Please help
  • In reply to Mayank Kargeti:

    Did you publish the site and all the media as well?
  • In reply to KamruzJaman_69704694:

    Yes I have publish the site and I am able to see that image path in the mark up as well :

    <div style="background-image: url(/media/default website/cover.ashx);">

    but it's not getting rendered
  • In reply to KamruzJaman_69704694:

    Yes I have published the site and media...
    Its is showing in markup but image is not getting generated

    <div style="background-image:url(/~/media/default website/cover.ashx);">