Adding Background images

[SAU]

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?

[tjoyce]

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.

[stefen]

@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>

[nmoore]

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

[SAU]

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

[stefen]

@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.