Re: Background Different for Mobile And Desktop

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)

Liquid_xPert_SJ
Shopify Partner
1200 130 172

@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

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- 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 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- 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
8432 2017 2476

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
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 ?

Liquid_xPert_SJ
Shopify Partner
1200 130 172

@brokiegulp 

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

 

thanks

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- 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 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- 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
8432 2017 2476

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. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
brokiegulp
Tourist
15 0 1

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