# Changing header image for mobile

**URL:** <https://community.hubspot.com/t/changing-header-image-for-mobile/57704>\
**Category:** Blog, Website & Page Publishing\
**Tags:** website-pages\
**Created:** [May 25, 2022, 3:19pm UTC](https://community.hubspot.com/t/changing-header-image-for-mobile/57704 "2022-05-25T15:19:29Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![DWang](https://avatars.discourse-cdn.com/v4/letter/d/f17d59/32.png) [@DWang](https://community.hubspot.com/u/DWang)\
**Post date:** [May 25, 2022, 3:19pm UTC](https://community.hubspot.com/t/changing-header-image-for-mobile/57704/1 "2022-05-25T15:19:29Z")

</div>

Is there a way to change the header image for mobile view vs. desktop view? So people viewing on desktop will see image 1 and people viewing on mobile device will see image 2.

---

<div class="post-metadata">

**Author:** ![kvlschaefer](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kvlschaefer/32/71076_2.png) [@kvlschaefer](https://community.hubspot.com/u/kvlschaefer)\
**Post date:** [May 26, 2022, 9:27pm UTC](https://community.hubspot.com/t/changing-header-image-for-mobile/57704/2 "2022-05-26T21:27:53Z")

</div>

Hi @DWang,

Thanks for reaching out!

I wanted to add some experts to our conversation.

Hi @Anton, @Teun, @alyssamwilie, @LMeert - Do you have any advice for @DWang?

Thanks!

Best,

Kristen

---

<div class="post-metadata">

**Author:** ![Teun](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/teun/32/28739_2.png) [@Teun](https://community.hubspot.com/u/Teun)\
**Post date:** [May 27, 2022, 6:54am UTC](https://community.hubspot.com/t/changing-header-image-for-mobile/57704/3 "2022-05-27T06:54:53Z")

</div>

Hi @DWang ,

Do you use custom modules? What I typically do is use a custom module with a picture field. The picture field looks like this:

```lia-code-sample
{
 "name": "picture",
 "label": "Picture",
 "sortable": false,
 "required": false,
 "locked": false,
 "children": [
 {
 "name": "desktop",
 "label": "Image: Desktop",
 "help_text": "",
 "sortable": false,
 "required": true,
 "locked": false,
 "responsive": false,
 "resizable": false,
 "type": "image",
 "default": {
 "src": "",
 "alt": null
 }
 },
 {
 "name": "tablet",
 "label": "Image: Tablet",
 "help_text": "",
 "sortable": false,
 "required": false,
 "locked": false,
 "responsive": false,
 "resizable": false,
 "type": "image",
 "default": {
 "src": "",
 "alt": null
 }
 },
 {
 "name": "mobile",
 "label": "Image: Mobile",
 "help_text": "",
 "sortable": false,
 "required": false,
 "locked": false,
 "responsive": false,
 "resizable": false,
 "type": "image",
 "default": {
 "src": "",
 "alt": null
 }
 },
 {
 "name": "desktop_large",
 "label": "Image: Desktop (> 1560px)",
 "help_text": "",
 "sortable": false,
 "required": false,
 "locked": false,
 "responsive": false,
 "resizable": false,
 "type": "image",
 "default": {
 "src": "",
 "alt": null
 }
 }
 ],
 "type": "group",
 "default": {}
}

```

The HTML looks like this:

```lia-code-sample
<picture class="c-picture">
 <source media="(max-width: 767px)" srcset="{{module.mobile.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=500 500w,
 {{module.mobile.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=1000 1000w,
 {{module.mobile.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=1500 1500w">
 <source media="(max-width: 1023px)" srcset="{{ module.tablet.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=800 800w,
 {{ module.tablet.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=1000 1000w,
 {{ module.tablet.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=1500 1500w,
 {{ module.tablet.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=2000 2000w">
 <source media="(max-width: 1559px)"
 srcset="{{ module.desktop.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=1100 1100w,
 {{ module.desktop.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=1500 2000w,
 {{ module.desktop.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=2500 2500w">
 <source media="(min-width: 1560px)"
 srcset="{{ module.large_desktop.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=1100 1100w,
 {{ module.large_desktop.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=1500 1500w,
 {{ module.large_desktop.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=2000 2000w,
 {{ module.large_desktop.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=2500 2500w">
 <img data-src="{{ module.desktop.src }}" alt="{{ module.desktop.alt }}" class="c-picture {{aClass}} lazy"
 width="{{ module.desktop.width }}" height="{{ module.desktop.height }}" loading="lazy">
</picture>

```

---

<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:** [May 27, 2022, 8:53am UTC](https://community.hubspot.com/t/changing-header-image-for-mobile/57704/4 "2022-05-27T08:53:23Z")

</div>

Hi @DWang,

sire it’s possible. But as @Teun mentioned - the easiest way would be a custom module.

My personal “go-to” method is different and might be a bit on the easier side. Just create two image fields(desktop and mobile) and write your module like this:

```lia-code-sample
{% require_css %}
<style>
.myHeroModule{
background-image:url('{{module.mobile_image.src}}');
background-size:cover;
background-position:center center;
min-height:480px;
max-height:760px;
width:100%;
padding:5rem 0;
}
@media screen and (min-width:1024px){
.myHeroModule{
background-image:url('{{module.desktop_image.src}}');
padding:2rem 0;
}
}
</style>
{% end_require_css %}

<div class="myHeroModule">
{# your header layout like header, text ... comes here #}
</div>

```

best,

Anton