How to make background image responsive?

[PrasadKD]

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?

[Oezcan · Accepted solution]

You are a lucky one @PrasadKD ,

this video came online today

Best regards,

Özcan

[Oezcan]

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.

@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.

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

[webdew]

Hi @PrasadKD  ,

Please refer to this link :- 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.