How to make a full width background images editable by non-coders (content creators)?

[lukesummerfield]

HubSpot hosted a CMS Developer AMA on July 25th 2018. This question was submitted and the first reply is what the panelist and audience chat responded with. (view the full AMA here)

--------------------------------------------

Now that the Hubl module is no longer in the new design manager, what is the best way to make full-width background images editable by my content team without them messing with code?

I previously used the export_to_template_content technique with the Hubl module.  

I'm curious what the best practice for something like this is now.

[Jsum]

@lukesummerfield,

There are a couple of ways to make a background image editable in the page editor.

One thing you can take an image source hubl tag:

{% image_src 'image_src' label='Background Image', src='url.jpg', no_wrapper=True %}

and use it to create some css:

background: url({% image_src 'image_src' label='Background Image', src='url.jpg', no_wrapper=True %}) center center no-repeat; background-size: cover;

and place the css in the inline css text input for the module or group you want an editable background image on. You can copy and paste the example above. Just remember to use single quotes and if you care about default content change 'url.jpg' to a real image url.