Background Different for Mobile And Desktop

[brokiegulp]

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. 

[Liquid_xPert_SJ]

@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

[Made4uo-Ribe]

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!

[brokiegulp]

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

[Liquid_xPert_SJ]

@brokiegulp 

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

thanks

[Made4uo-Ribe]

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. 

[brokiegulp]

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