# Custom Module for Background Image?

**URL:** <https://community.hubspot.com/t/custom-module-for-background-image/793>\
**Category:** CMS Development\
**Created:** [January 20, 2017, 10:46pm UTC](https://community.hubspot.com/t/custom-module-for-background-image/793 "2017-01-20T22:46:04Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![bigthinkery](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bigthinkery/32/191414_2.png) [@bigthinkery](https://community.hubspot.com/u/bigthinkery)\
**Post date:** [January 20, 2017, 10:46pm UTC](https://community.hubspot.com/t/custom-module-for-background-image/793/1 "2017-01-20T22:46:04Z")

</div>

Is there a standard for custom modules for background images? I have a custom module that works perfectly with one template and not another (with very little variation between the two) and I have no idea why it won’t work.

Here’s my code for my custom module:

```auto
<style>
.main-image {
 background: url('{{ widget.header_image.src }}');
 background-size: 100% auto;
 background-repeat:no-repeat;
 background-position: center top !important;
}
</style>

```

Then I’m calling that style in the group in which I want it to appear.

Is there something that is more standard or better?

Thanks for the help!

Lisa

---

<div class="post-metadata">

**Author:** ![ndwilliams3](https://avatars.discourse-cdn.com/v4/letter/n/c4cdca/32.png) [@ndwilliams3](https://community.hubspot.com/u/ndwilliams3)\
**Post date:** [January 20, 2017, 11:00pm UTC](https://community.hubspot.com/t/custom-module-for-background-image/793/2 "2017-01-20T23:00:39Z")

</div>

One issue: widget\*\*\_data\*\*.header\_image.src not widget.header\_image.src

That should fix it.

```auto
<style>
.main-image {
 background: url('{{ widget_data.header_image.src }}');
 background-size: 100% auto;
 background-repeat:no-repeat;
 background-position: center top !important;
}
</style>

```

---

<div class="post-metadata">

**Author:** ![bigthinkery](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bigthinkery/32/191414_2.png) [@bigthinkery](https://community.hubspot.com/u/bigthinkery)\
**Post date:** [January 21, 2017, 12:40am UTC](https://community.hubspot.com/t/custom-module-for-background-image/793/3 "2017-01-21T00:40:44Z")

</div>

Hmm.. that didn’t help and when I copy the snippet, data isn’t in there 😞

I just don’t understand why this would work with one template and not another. It makes no sense to me.

---

<div class="post-metadata">

**Author:** ![bigthinkery](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bigthinkery/32/191414_2.png) [@bigthinkery](https://community.hubspot.com/u/bigthinkery)\
**Post date:** [January 21, 2017, 1:27pm UTC](https://community.hubspot.com/t/custom-module-for-background-image/793/4 "2017-01-21T13:27:25Z")

</div>

I fixed this. Want to know how? I deleted the module and added it back.

Sometimes these hubspot templates are still buggy.

---

<div class="post-metadata">

**Author:** ![suniltodkar](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/suniltodkar/32/53869_2.png) [@suniltodkar](https://community.hubspot.com/u/suniltodkar)\
**Post date:** [September 5, 2018, 7:40am UTC](https://community.hubspot.com/t/custom-module-for-background-image/793/5 "2018-09-05T07:40:29Z")

</div>

I have one question where you put this code? Can you tell me. Because i am new in hubspot.