We have a component that contains a background image. Our front-end guy needs it to be loaded through CSS (i.e. background: url(/*path here*/)...). The following is a possible solution we came up with:

@string src = // Get image path from Sitecore().Field("Picture");

<div style="background: url(@src) left top no-repeat;"> ... </div>

However, there are two problems with this approach:

  1. It makes it very difficult for the content editor to swap out the image. They will have to manually change it through edit item.
  2. It feels like a hack/workaround.

So the question is as follows: Is there a way to edit the CSS of an element through Razor/Sitecore? Specifically, the background: field.

Related posts

Recent Viewed