Shopify themes, liquid, logos, and UX
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.
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
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!
I have only 1 or 2 info about coding so what's the media query ? can you help on that too ?
media query used for different devices, like, Wide screen, laptops, tablets, mobile and small screenshots.
thanks
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.
can i use this on gif too ? I tried on gif but it didn't work
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025