Adding a background image to a parent region

I’ve got a parent region that serves as a wrapper for other regions. I an trying to figure out the best route to allow non-technical users to add a custom background image to this specific wrapper region (DIV).

Any thoughts?

Since it’s a wrapper region, it contains other regions and widgets therefore it gets locked, so they have no direct access to modify it.

The only way I know is to provide the CSS code snippets for changing the background image and allow them to enter it within style tags under the Additional Code box under Meta-Data. Or provide additional CSS file that contain these CSS declarations and give them html code snippets to link to these CSS files. Since so many users are not very technical, this approach is not really preferred, but have no other options right now.

Setting up additional Templates or themes per background image is also out of the question as they will add too much additional overhead and maintenance.

I could really use an easy option to allow a contributor to add in an additional CSS file via a shared file asset, then all they’d have to do is select the correct CSS file from a list of shared assets. Maybe this could be an option on the Style Tab?

I also do not want to give any users specific access to the Designer Role, as we do not want them to modify the template.

Hi Paul,

Here’s one possible option using jQuery:

  1. Create an empty Rich Text widget on your template and give it a root class of “setBg” (through the Style tab).

  2. Hide the contents of this widget using CSS:

display: none;   
} ```   
 
3. Add jQuery to your template’s Meta-data code insertion point that stores in a variable the SRC of any IMG tag in the “setBg” DIV, and then injects that as the background image for any specified DIV (using a DIV with the class of “displayBg” for this example):   
 
```<script> <br /> $(document).ready(function(){ <br />
var imgSrc = $('.setBg img').attr('src') <br />
$('.displayBg').css( 'background-image', 'url(' + imgSrc + ')' ); <br /> }); <br /> </script>```   
 
Now, on a page-by-page basis, your end users can add, remove, or update images in the “setBg” Rich Text widget to set or remove images from the specified DIV.

Nice, creative thinking! This may very well work… Will get back to you after I try it.

Thanks! Let me know if this works for what you’re trying to do.