# Problem with HubL image module

**URL:** <https://community.hubspot.com/t/problem-with-hubl-image-module/7932>\
**Category:** CMS Development\
**Created:** [February 24, 2018, 3:07am UTC](https://community.hubspot.com/t/problem-with-hubl-image-module/7932 "2018-02-24T03:07:05Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jonlcrow](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jonlcrow/32/102945_2.png) [@jonlcrow](https://community.hubspot.com/u/jonlcrow)\
**Post date:** [February 24, 2018, 3:07am UTC](https://community.hubspot.com/t/problem-with-hubl-image-module/7932/1 "2018-02-24T03:07:05Z")

</div>

I am trying to use an image module as the background of a div, so that I can change the image in the wysiwyg editor.

I have the code set up as

`<section style="width:100%; height:960px;background:url({% image 'Hero_image' label='Hero Image', alt='Hero Image', src="../hero-1600x960.png" %}'); background-repeat: no-repeat; background-position: center; background-size:cover; background-attachment: scroll;">`

What I get is the image followed by

`'); background-repeat: no-repeat; background-position: center; background-size:cover; background-attachment: scroll;">`

Is the second curly bracket causing a problem? Do I need to do something with \*\*bleep\*\* characters? Is there another way to do this? Any other thoughts?

Thanks,

Jonathan

---

<div class="post-metadata">

**Author:** ![benvanlooy](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/benvanlooy/32/98997_2.png) [@benvanlooy](https://community.hubspot.com/u/benvanlooy)\
**Post date:** [February 25, 2018, 9:45am UTC](https://community.hubspot.com/t/problem-with-hubl-image-module/7932/2 "2018-02-25T09:45:35Z")

</div>

Image renders an image tag, which you don’t need..

You only want to render an image url, using: image\_src

so what you need is this:

`<section style="width:100%; height:960px;background:url('{% image_src "image_src" src="-URL-to-image-placeholder.jpg", no_wrapper=True %}'); background-repeat: no-repeat; background-position: center; background-size:cover; background-attachment: scroll;">`

More info?

> **[Accounts Dashboard | HubSpot](https://app.hubspot.com/myaccounts?next=developerdocs&redirect=%2Fcms%2Freference%2Fhubl%2Fhubl-supported-modules)**

---

<div class="post-metadata">

**Author:** ![jonlcrow](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jonlcrow/32/102945_2.png) [@jonlcrow](https://community.hubspot.com/u/jonlcrow)\
**Post date:** [February 26, 2018, 10:30pm UTC](https://community.hubspot.com/t/problem-with-hubl-image-module/7932/3 "2018-02-26T22:30:39Z")

</div>

Thanks. Worked perfectly!

---

<div class="post-metadata">

**Author:** ![jonlcrow](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jonlcrow/32/102945_2.png) [@jonlcrow](https://community.hubspot.com/u/jonlcrow)\
**Post date:** [February 26, 2018, 11:40pm UTC](https://community.hubspot.com/t/problem-with-hubl-image-module/7932/4 "2018-02-26T23:40:04Z")

</div>

Actually - let me take that back. It worked to get the image styled correctly. But when I edit the page I can’t use the widget to change the image.

Whatever image I change it to it still shows the original image.

---

<div class="post-metadata">

**Author:** ![benvanlooy](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/benvanlooy/32/98997_2.png) [@benvanlooy](https://community.hubspot.com/u/benvanlooy)\
**Post date:** [February 27, 2018, 8:33am UTC](https://community.hubspot.com/t/problem-with-hubl-image-module/7932/5 "2018-02-27T08:33:03Z")

</div>

And you’re sure that:

- you saved and published before leaving the page?

- that it’s not a caching issue? (check the page in an incognito tab)