Background Different for Mobile And Desktop

Store Design
1

I wanted to change the background of the website and this is the code I have

body {
background: url(“GIF URL”) !important; /* chanage image as you like */
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

And the problem is in desktop it’s okay but in mobile the photo it’s not looking good so I made another photo so 1 photo is horizantal (already in website) and the other which is I am trying to use on mobile is vertical. basically depends on the device the peoples are coming to my website they will see that background. I couldn’t find anything so if someone help me that would be great.

1 Like
2

@brokiegulp

please add below code with your mobile image URL into your base.css file or wherever you are placing your CSS code.

@media screen and (max-width: 767px) {
  body {
background: url("GIF URL") !important; /* mobile image url */
}
}

Thanks

3

Hi @brokiegulp

You need to add a media query.

@media only screen and (max-width: 749px){
body {
background: url("GIF URL") !important; /* chanage image as you like */
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

4

I have only 1 or 2 info about coding so what’s the media query ? can you help on that too ?

5

@brokiegulp

media query used for different devices, like, Wide screen, laptops, tablets, mobile and small screenshots.

thanks

6

The code that I give see the different from your code.

@media only screen (max-wdith: px) / or (min-width: px) if you add the media query you will only calling the specific screen size. Or minimum to show to that screen size. Try so youll know it.

7

can i use this on gif too ? I tried on gif but it didn’t work