Background Different for Mobile And Desktop

brokiegulp
Tourist
15 0 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. 

Replies 6 (6)

Liqiud_xPert_SJ
Shopify Partner
730 93 115

@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

- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂

Made4uo-Ribe
Shopify Partner
5515 1327 1635

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


brokiegulp
Tourist
15 0 1

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

Liqiud_xPert_SJ
Shopify Partner
730 93 115

@brokiegulp 

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

 

thanks

- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
Made4uo-Ribe
Shopify Partner
5515 1327 1635

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. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


brokiegulp
Tourist
15 0 1

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