Is there a way to allow content creator to alter background-image?

Occasional Contributor

I want a banner with an image and text on top spanning the full width of the screen. So far the easiest means to do this I've found, allowing for responsive sizing, is to use a header with a background-image... but it appears that there is no simple way to let a content creator change that image? Trying to do a banner image with a negative margin-top header to put the header on top of the image, works for desktop size, but is complicated to resize for other screen sizes... suggestions? (just fyi I haven't yet tried my hand at a custom module, so if there are ideas, without using custom modules that would be great)

Reply
0 Upvotes
2 Replies 2
Highlighted
Occasional Contributor

Actually I was able to use object-fit and height and width with negative margin to get it to work

Reply
0 Upvotes
Esteemed Advisor

I do this all the time.

If you are using the drag and drop editor use a hubl module. otherwise place this on the coded file where you want it. 

 

There is a little hubL involved but nothing to scary.  Create an image source widget:

 

{% image_src "image_src" label="Banner Background Image" %}

Place it in the url of a background style attribute

<div style='background: url(  {% image_src "image_src" label="Banner Background Image" %} );'>

</div>

Watch the quotation nesting. notice I used single on the outside and doubles on the inside. either way will work just dont mix them up.

 

Add any background position or sizing either through your css stylesheet (may need !important tag) or inline with the background image

<div style='background: url(  {% image_src "image_src" label="Banner Background Image" %} ) center center no-repeat; background-size: cover;'>

</div>

Then use this page:

http://designers.hubspot.com/docs/hubl/hubl-supported-modules

 

To get the code for any other modules you need to add between the div tags. If you need an h1 or a paragraph you can use a header or rich text module. example: 

<div style='background: url(  {% image_src "image_src" label="Banner Background Image" %} ) center center no-repeat; background-size: cover;'>

    {% rich_text "page_header" label="Page Header" html='<h1>My rich text default content</h1>' %}

</div>

Now you will have an image selector and a rich text module available in your page editor for pages using this template. uploading an image will automatically make it the background image of the container (div in this case).

- Jonathan Sumner
Reply
0 Upvotes