How to make background image editable in Experience Editor in Sitecore using C#

Question

I have a component and it has background image. I am able to render the image but I need the image to be editable in Experience editor but now the image is not editable.

<div style="background-image: url(@Model.Image.Src);">
    <div>
        
            <span>@Model.title</span>            
            <p>@Model.Description</p>
            
    </div>
</div>

I tried to give <div style="background-image: url(@Editable(model => model.Image.src));">

But this did not work

Answer 1

There are a couple of options for making background images editable in Experience Editor:

1. Render it as editable <img> tag when a page is loaded in Experience Editor mode and keep your current markup for other modes:

@if (Sitecore.Context.PageMode.IsExperienceEditorEditing)
{
   @Editable(model => model.Image)
}
else
{
   <div style="background-image: url(@Model.Image.Src);">
      ...
   </div>
}

2. Create a Custom Experience Editor button for your rendering:

   • Go to the Core database and add a new item under /sitecore/content/Applications/WebEdit/Custom Experience Buttons using the template Field Editor Button
   • Populate the field Fields with a pipe-separated list of field names that should be editable via this button ("Image" in your example)
   • Switch back to the Master database, navigate to your rendering item in the content tree and select the newly created Field Editor Button in the field Experience Editor Buttons

After this you will start seeing a new button when selecting a rendering in Experience Editor:

The drawback of the second approach is that the new image will not be visible on the page immediately after making changes in the editing dialogue, so CMS users will have to save and refresh the page to see their changes.