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?
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) ;
}}