Shopify themes, liquid, logos, and UX
Hi everyone,
I’m facing an issue where the background image on my store appears zoomed in on one page but looks zoomed out on another page. I’ve attached screenshots to show the difference.
I’d like to know:
Any advice on where to adjust the settings (CSS or theme settings) would be much appreciated! Thanks in advance!
Solved! Go to the solution
This is an accepted solution.
@arnelo thanks for share url i can see is parallax effect doesn't work proper ios device that show issue background image can try this code if are ok with this look
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.
@media (max-width: 768px){body {background-attachment: inherit;background-repeat: repeat;}}
@arnelo
Sorry you are facing this issue,
It would be my pleasure to help you.
Please share your site URL,
I will check out the issue and provide you with a solution here.
Hello sir,
the URL would be https://cbdcharly.com/
I WOULD APPRECIATE YOU LOOKING INTO THIS, THANKS!
This is an accepted solution.
@arnelo thanks for share url i can see is parallax effect doesn't work proper ios device that show issue background image can try this code if are ok with this look
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.
@media (max-width: 768px){body {background-attachment: inherit;background-repeat: repeat;}}
Thank you sir, you are a legend!
@arnelo Glad I could help
Sir, how can I zoom in the picture a little bit? Right now, it's at its original size, which is not bad, but I would like to zoom in slightly for the mobile version so that it looks more like the first screenshot I sent.
SCREENSHOT 1
@arnelo oh sorry still there issue so please share your particular page url so i will check it out and update you
@arnelo thanks for URL
We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?
No sir, what you told me to do worked, but I have another question. Right now, the original file format is being used as the background for every page, but I don’t like it because it’s too zoomed out. I would like it to be slightly zoomed in for mobile, like that.
At the moment it looks like this after your fix:
BUT I would like to have it like this:
THANK YOU VERY MUCH FOR YOUR TIME!
@arnelo yes please add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.
@media (max-width: 768px){background-size: 768px;}
Sir, I did, but it's still the same size and not zoomed in
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn 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, 2025