# Custom Background Module - selecting different image for mobile & tablet view

**URL:** <https://community.hubspot.com/t/custom-background-module-selecting-different-image-for-mobile-tablet-view/19508>\
**Category:** CMS Development\
**Created:** [March 18, 2020, 3:59pm UTC](https://community.hubspot.com/t/custom-background-module-selecting-different-image-for-mobile-tablet-view/19508 "2020-03-18T15:59:59Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![christinacschne](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/christinacschne/32/98942_2.png) [@christinacschne](https://community.hubspot.com/u/christinacschne)\
**Post date:** [March 18, 2020, 3:59pm UTC](https://community.hubspot.com/t/custom-background-module-selecting-different-image-for-mobile-tablet-view/19508/1 "2020-03-18T15:59:59Z")

</div>

Hi All,

I’ve created a custom background module and it’s working great. The design team wants the image swapped out for a new image when viewing on mobile and tablets.

Are there fields I could add in the module that would allow for this swap out of images? Does anyone have thoughts or how they would handle this?

I appreciate your thoughts!

-Christina

---

<div class="post-metadata">

**Author:** ![sharonlicari](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sharonlicari/32/101479_2.png) [@sharonlicari](https://community.hubspot.com/u/sharonlicari)\
**Post date:** [March 23, 2020, 10:58am UTC](https://community.hubspot.com/t/custom-background-module-selecting-different-image-for-mobile-tablet-view/19508/2 "2020-03-23T10:58:23Z")

</div>

Hey @christinacschne

Could you please share the URL?

I’ll tag a few experts that could share their thoughts with you.

Hey @ajchapman20 @Anton @stefen could you please share your expertise with @christinacschne ?

Thank you

Sharon

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [March 23, 2020, 12:11pm UTC](https://community.hubspot.com/t/custom-background-module-selecting-different-image-for-mobile-tablet-view/19508/3 "2020-03-23T12:11:26Z")

</div>

Hi @christinacschne,

there are many ways to achieve this.

You could:

- Set up a wrapper div with  
`class="changable-image"` and then go with something like this( still in the HTML+ Hubl) section of the module

But: It’s nessesary to do everything in the HTML+Hubl section since the other sections like CSS and JS can’t understand Hubl.

regards,

Anton

---

<div class="post-metadata">

**Author:** ![christinacschne](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/christinacschne/32/98942_2.png) [@christinacschne](https://community.hubspot.com/u/christinacschne)\
**Post date:** [March 23, 2020, 1:31pm UTC](https://community.hubspot.com/t/custom-background-module-selecting-different-image-for-mobile-tablet-view/19508/4 "2020-03-23T13:31:03Z")

</div>

This is great, @Anton - I will try your suggestion and see if I can get it to work.  
@sharonlicari thank you for getting back.  
Here is my page. @Anton - do you have any suggestions on how to keep the Rich Text container below the background image from pushing up? Seems I have to place \<br\> tags so it pushes down and this isn’t ideal.  
[https://info.comporium.com/residential-subdivision-fiber-bg-image](https://info.comporium.com/residential-subdivision-fiber-bg-image)

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [March 23, 2020, 5:52pm UTC](https://community.hubspot.com/t/custom-background-module-selecting-different-image-for-mobile-tablet-view/19508/5 "2020-03-23T17:52:07Z")

</div>

You’re welcome @christinacschne,

sure

just

add some margin to one of those elements.

for the so called “hero”(your image module) add a margin-bottom or add a margin-top to the content(the rich-text below the “hero”).

I recomend to use “scaleable” margin values like _em_ or _vh_

It should look like this:

```auto
.changable-image{
margin-bottom:5vw;- OR - margin-bottom:5em;
}

```

or

```auto
.content{
margin-top:5vh;- OR - margin-bottom:5em;}

```

**Explanation:**

**em:** uses your base font size. e.g: if your base font is 16px(every browser default font-size) the 5em would be 80px  
**vh:** calculates the current browser height of the visitor and divides it by X. e.g: If your browser is fullscreen and you have a screen resolution of 1920\*1080px(fullHD), then it would be (1080/100)\*5 so 54px.

regards,

Anton

**tipp:**  
If you’re using a theme from the marketplace it should have a class like “container” or “content” with a top and bottom margin(outer spacing of the element) or padding(inner spacing of the element)