# Adding Background images

**URL:** <https://community.hubspot.com/t/adding-background-images/13878>\
**Category:** CMS Development\
**Created:** [April 6, 2019, 12:42am UTC](https://community.hubspot.com/t/adding-background-images/13878 "2019-04-06T00:42:01Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![SAU](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sau/32/87988_2.png) [@SAU](https://community.hubspot.com/u/SAU)\
**Post date:** [April 6, 2019, 12:42am UTC](https://community.hubspot.com/t/adding-background-images/13878/1 "2019-04-06T00:42:01Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![stefen](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stefen/32/29274_2.png) [@stefen](https://community.hubspot.com/u/stefen)\
**Post date:** [April 8, 2019, 1:48pm UTC](https://community.hubspot.com/t/adding-background-images/13878/2 "2019-04-08T13:48:11Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![SAU](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sau/32/87988_2.png) [@SAU](https://community.hubspot.com/u/SAU)\
**Post date:** [April 8, 2019, 11:22pm UTC](https://community.hubspot.com/t/adding-background-images/13878/3 "2019-04-08T23:22:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![stefen](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stefen/32/29274_2.png) [@stefen](https://community.hubspot.com/u/stefen)\
**Post date:** [April 9, 2019, 12:47pm UTC](https://community.hubspot.com/t/adding-background-images/13878/4 "2019-04-09T12:47:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nmoore](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/nmoore/32/81360_2.png) [@nmoore](https://community.hubspot.com/u/nmoore)\
**Post date:** [July 24, 2020, 4:14pm UTC](https://community.hubspot.com/t/adding-background-images/13878/5 "2020-07-24T16:14:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [April 9, 2019, 1:42pm UTC](https://community.hubspot.com/t/adding-background-images/13878/6 "2019-04-09T13:42:09Z")

</div>

Go to [Belch](https://app.belch.io) 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.