Adding Background images

Developer Support CMS Development
1

I have created a series of landing pages and have an editable text block with a background hero image which I have styled in css.

Is there a background module or what is the best way I can have the user edit the text and select a background image?

2

@SAU I’d recommend creating a custom module, call it something like “Hero”, then you can add text and image fields so they are editable. The code would look something like this:

<div class="hero"{% if module.bg_image %} style="background-image: url({{ module.bg_image }});"{% endif %}>
 <div class="hero-text">
 {{ module.text }}
 </div>
</div>
3

Thanks, I can’t create a custom module if I use coded templates though? Only in Drag and Drop

4

@SAU you can use custom modules in coded templates you’ll just need to copy and paste the code in the bottom right of the module editor.

5

Can you show us what the fields.json file would look like for this module? Including a default background image?

6

Go to Belch and publish a page and checkout the source code of the template after you publish.

You will see a lot of different ways we created that functionality along with other built in module functionality.