# How to make background image responsive?

**URL:** <https://community.hubspot.com/t/how-to-make-background-image-responsive/48829>\
**Category:** CMS Development\
**Tags:** design-manager, css, javascript, free, html, starter\
**Created:** [December 20, 2021, 8:09pm UTC](https://community.hubspot.com/t/how-to-make-background-image-responsive/48829 "2021-12-20T20:09:56Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![PrasadKD](https://avatars.discourse-cdn.com/v4/letter/p/ba9def/32.png) [@PrasadKD](https://community.hubspot.com/u/PrasadKD)\
**Post date:** [December 20, 2021, 8:09pm UTC](https://community.hubspot.com/t/how-to-make-background-image-responsive/48829/1 "2021-12-20T20:09:56Z")

</div>

I just put a background image to the complete layout using Hubspot cms. but it’s not responsive on mobile. so I just want this background image to disappear in the mobile version or I want a new image as a background on mobile. How is that to do?

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [December 21, 2021, 8:20am UTC](https://community.hubspot.com/t/how-to-make-background-image-responsive/48829/2 "2021-12-21T08:20:39Z")

</div>

Hi @PrasadKD ,  
Please refer to this link :- [https://codepen.io/theiwaz/pen/vybjc  
 ](https://codepen.io/theiwaz/pen/vybjc)

Hope this helps!  
If we were able to answer your query, kindly help the community by marking it as a solution.  
Thanks and Regards.

---

<div class="post-metadata">

**Author:** ![Oezcan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/oezcan/32/53959_2.png) [@Oezcan](https://community.hubspot.com/u/Oezcan)\
**Post date:** [December 21, 2021, 10:02am UTC](https://community.hubspot.com/t/how-to-make-background-image-responsive/48829/3 "2021-12-21T10:02:41Z")

</div>

Hello @PrasadKD ,

If you still want to use a different background image or want it to disappear, can you use media query as in my examples.

Example 1.  
If you want the picture not to be displayed in the mobile use this.  
In this example, I use min-width 600px, the image is displayed from 600px wide, not below that.

```lia-code-sample
@media only screen and (min-width: 600px) {
body {
background-image: url(https://i.picsum.photos/id/1/5616/3744.jpg?hmac=kKHwwU8s46oNettHKwJ24qOlIAsWN9d2TtsXDoCWWsQ) ;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}}

```

Example 2.

If you want to use a different image, take a look at the second example.

```lia-code-sample
body {
background-image: url(http://ppcdn.500px.org/75319705/1991f76c0c6a91ae1d23eb94ac5c7a9f7e79c480/2048.jpg) ;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

@media only screen and (min-width: 600px) {
body {
background-image: url(https://i.picsum.photos/id/0/5616/3744.jpg?hmac=3GAAioiQziMGEtLbfrdbcoenXoWAW-zlyEAMkfEdBzQ) ;
}}

```

I hope that I could help you.

Best regards

Özcan

---

<div class="post-metadata">

**Author:** ![Oezcan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/oezcan/32/53959_2.png) [@Oezcan](https://community.hubspot.com/u/Oezcan)\
**Post date:** [December 21, 2021, 4:28pm UTC](https://community.hubspot.com/t/how-to-make-background-image-responsive/48829/4 "2021-12-21T16:28:46Z")

</div>

You are a lucky one @PrasadKD ,

this [video](https://www.youtube.com/watch?v=KBQz1OSpRv8&ab_channel=GoogleChromeDevelopers) came online today

Best regards,

Özcan