# Help with full width image design

**URL:** <https://community.hubspot.com/t/help-with-full-width-image-design/3993>\
**Category:** CMS Development\
**Created:** [November 24, 2017, 11:45am UTC](https://community.hubspot.com/t/help-with-full-width-image-design/3993 "2017-11-24T11:45:30Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![AllisonAltus](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/allisonaltus/32/58551_2.png) [@AllisonAltus](https://community.hubspot.com/u/AllisonAltus)\
**Post date:** [November 24, 2017, 11:45am UTC](https://community.hubspot.com/t/help-with-full-width-image-design/3993/1 "2017-11-24T11:45:30Z")

</div>

Hello, can anyone give me tips on how to create a full-width image (background image) that has a form content module on top of it and a rich text module on top of it. I’m trying to create the attached design.

Many thanks!

Allison

 ![full width image 2.JPG](https://d2qpr2jzcazej7.cloudfront.net/original/2X/f/f92ee193c46548366bcc81f7dfcc79594592c249.jpeg)

---

<div class="post-metadata">

**Author:** ![Sellmx](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sellmx/32/71475_2.png) [@Sellmx](https://community.hubspot.com/u/Sellmx)\
**Post date:** [November 24, 2017, 2:08pm UTC](https://community.hubspot.com/t/help-with-full-width-image-design/3993/2 "2017-11-24T14:08:05Z")

</div>

Hi Allison!

The simplest way to achieve something like this would be to wrap the form in a group and add some custom styles to that group. If you know the image url, you can add the following styles to the newly created group.

`background-image: url('your-image-address.png'); background-size: cover;`

Here’s an example of how to do it in the **Design Manager**

![Zcv3AY.gif](https://d2qpr2jzcazej7.cloudfront.net/original/2X/9/991367a6035d0de3dd68ab3fffb3fddf2b4e6528.gif)

If you need any personal help, feel free to reach out to me at [hi@sellmx.com](mailto:hi@sellmx.com) and I can help you out, no charge.

---

<div class="post-metadata">

**Author:** ![AllisonAltus](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/allisonaltus/32/58551_2.png) [@AllisonAltus](https://community.hubspot.com/u/AllisonAltus)\
**Post date:** [November 24, 2017, 4:22pm UTC](https://community.hubspot.com/t/help-with-full-width-image-design/3993/3 "2017-11-24T16:22:57Z")

</div>

Thanks so much yes that worked! However, my rich text box and form are now spread across the background image. Is it best to just use padding to move them to where i want them to be? Also is there any other coding i need to add to make sure it is responsive to mobile?

 ![backgroudn imaage.JPG](https://d2qpr2jzcazej7.cloudfront.net/original/3X/5/e/5e1a89ca9564a8a12d9fafd332c0f0c9303e9d52.jpeg)

---

<div class="post-metadata">

**Author:** ![TRooInbound](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/trooinbound/32/89545_2.png) [@TRooInbound](https://community.hubspot.com/u/TRooInbound)\
**Post date:** [November 24, 2017, 5:19pm UTC](https://community.hubspot.com/t/help-with-full-width-image-design/3993/4 "2017-11-24T17:19:33Z")

</div>

Hi @AllisonAltus,

I am giving you best way to implement full-width background image in HubSpot with the editabiliy feature. it will help you to change background images on every different page which is created or publish from this design template.

no need to go into coding every time once you did this. next time you have to just choose an image from your file manager and replace it.

**Using HubL code**

this way is more effective and you can change images from page edit level mode.

we prefer this way also.

the same process like above, you have to just create a group of your form and text module and give a class to that created group.

for example, we give the class name ‘full-width-bg’

Drag one custom HubL from template editor left sidebar and past below code with your image path,

```auto
{% image "background_image_headerFH" label='Select a background image for full width banner', 
src='banner.png', no_wrapper=True, 
export_to_template_context=True %}
<style>
.full-width-bg{
 background:url("{{widget_data.background_image_headerFH.src }}");
 background-position: center center;
 background-repeat: no-repeat;
 background-size: cover; padding:140px 20px;
}
</style>

```

this will be easy to change from page edit mode in all pages using this templates like,

![change_bg_image.gif](https://d2qpr2jzcazej7.cloudfront.net/original/2X/1/17bc58586d9a323e46d3e78161c945fe85bce27c.gif)

---

<div class="post-metadata">

**Author:** ![Casey1](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/casey1/32/86309_2.png) [@Casey1](https://community.hubspot.com/u/Casey1)\
**Post date:** [March 22, 2018, 8:09pm UTC](https://community.hubspot.com/t/help-with-full-width-image-design/3993/5 "2018-03-22T20:09:15Z")

</div>

I am having trouble with this. See the image, I put in Custom HubL module and it shows up on template but not in final preview.

 ![Screen Shot 2018-03-22 at 1.06.12 PM.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/c/c138d961b1241813df40fd2689f1bc651c97f139.png)

 ![Screen Shot 2018-03-22 at 1.07.18 PM.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/0/b/0b143593ce885150facbe33845c82a79289d5530.png)

 ![Screen Shot 2018-03-22 at 1.07.43 PM.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/2X/5/5ce6b49cc32a83c6cd2de1b4dd095a472b9336e4.jpeg)

 ![Screen Shot 2018-03-22 at 1.08.15 PM.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/0/d/0d82d6141e824e70382c5c8fd4b68ccae4a40d39.jpeg)

 ![Screen Shot 2018-03-22 at 1.08.34 PM.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/2/24ef7e8fac12631dad780c1a2e16d031238cc03d.png)

---

<div class="post-metadata">

**Author:** ![Sellmx](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sellmx/32/71475_2.png) [@Sellmx](https://community.hubspot.com/u/Sellmx)\
**Post date:** [November 24, 2017, 7:12pm UTC](https://community.hubspot.com/t/help-with-full-width-image-design/3993/6 "2017-11-24T19:12:18Z")

</div>

Yep, looks like the group might also use 3 – 4rem of padding to make it look better. As for the responsiveness – everything should be a-okay, since Hubspot handles the row-to-column switch by itself and the background image doesn’t affect anything else.

---

<div class="post-metadata">

**Author:** ![AllisonAltus](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/allisonaltus/32/58551_2.png) [@AllisonAltus](https://community.hubspot.com/u/AllisonAltus)\
**Post date:** [November 27, 2017, 9:13am UTC](https://community.hubspot.com/t/help-with-full-width-image-design/3993/7 "2017-11-27T09:13:17Z")

</div>

hi @Sellmx, thanks for your help with this issue. When i view my form on desktop preview it looks like this:

 ![desk top view1.JPG](https://d2qpr2jzcazej7.cloudfront.net/original/3X/2/2/2230a8aac6c177e10bd997ded904717bdf0301fd.jpeg)

But when viewed on mobile preview the form looks like this:

 ![mobile view.JPG](https://d2qpr2jzcazej7.cloudfront.net/original/3X/e/7/e7bfd0d47aa529af6c8dc5dc6e10fb7e6967800d.jpeg)

Is it the padding that is causing this? Is there anyway to make my blue form box smaller? but without using the padding options? Thanks.

---

<div class="post-metadata">

**Author:** ![TRooInbound](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/trooinbound/32/89545_2.png) [@TRooInbound](https://community.hubspot.com/u/TRooInbound)\
**Post date:** [November 27, 2017, 9:30am UTC](https://community.hubspot.com/t/help-with-full-width-image-design/3993/8 "2017-11-27T09:30:59Z")

</div>

Hi @AllisonAltus,

looks like some problem in HubSpot Auto Responsive layout in your Template.

can you please send me URL link so, we can give you a proper solution?

**Team TRooInbound**

---

<div class="post-metadata">

**Author:** ![AllisonAltus](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/allisonaltus/32/58551_2.png) [@AllisonAltus](https://community.hubspot.com/u/AllisonAltus)\
**Post date:** [November 27, 2017, 12:07pm UTC](https://community.hubspot.com/t/help-with-full-width-image-design/3993/9 "2017-11-27T12:07:05Z")

</div>

Hi @Sellmx, is it possible to change the size of the background cover with your solution? For example i want to make the height of the image smaller?

thank you

Allison

---

<div class="post-metadata">

**Author:** ![Sellmx](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sellmx/32/71475_2.png) [@Sellmx](https://community.hubspot.com/u/Sellmx)\
**Post date:** [November 27, 2017, 2:02pm UTC](https://community.hubspot.com/t/help-with-full-width-image-design/3993/10 "2017-11-27T14:02:40Z")

</div>

Hey Allison, it’s bit difficult to determine what’s the main cause of the squishy form. Might be the padding pushing from both sides. If you want I can take a look at it and figure something out (pro bono).

As for the background image size changes – the “background-size: cover” automatically stretches the background image to fill the background and crops the overflowing edges. This makes it bit difficult to adjust the background perfectly (because the aspect ratio of the container changes when making the browser window smaller).

However it’s possible to set the origin of the image (“background-position: top center” or “background-position: bottom center” etc).

Hopefully it didn’t get too confusing. 🙂 Drop me a line if you need any hands-on help - [hi@sellmx.com](mailto:hi@sellmx.com)

Cheers