Background Zoom Issue: Different Sizes on Pages

Solved

Background Zoom Issue: Different Sizes on Pages

arnelo
Excursionist
22 0 8

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:

  1. Why is this happening?
  2. How can I make the background image consistent across all pages so it’s the same size? (I would prefer the size of the 1st screenshot of the product page)

Any advice on where to adjust the settings (CSS or theme settings) would be much appreciated! Thanks in advance!

 

photo_2025-01-26_19-18-52.jpg

photo_2025-01-26_19-18-54.jpg

photo_2025-01-26_19-18-57.jpg

   

Accepted Solution (1)
KetanKumar
Shopify Partner
37583 3668 12151

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;}}

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 12 (12)

KetanKumar
Shopify Partner
37583 3668 12151

@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.

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
arnelo
Excursionist
22 0 8

Hello sir,

the URL would be https://cbdcharly.com/

I WOULD APPRECIATE YOU LOOKING INTO THIS, THANKS!

KetanKumar
Shopify Partner
37583 3668 12151

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;}}

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
arnelo
Excursionist
22 0 8

Thank you sir, you are a legend!

KetanKumar
Shopify Partner
37583 3668 12151

@arnelo Glad I could help

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
arnelo
Excursionist
22 0 8

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_0-1738438597634.jpeg

 

KetanKumar
Shopify Partner
37583 3668 12151

@arnelo oh sorry still there issue so please share your particular page url so i will check it out and update you 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
arnelo
Excursionist
22 0 8

Hello this is the URL:
https://cbdcharly.com/

Thank you

KetanKumar
Shopify Partner
37583 3668 12151

@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?

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
arnelo
Excursionist
22 0 8

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:

photo_2025-02-04_19-37-13.jpg

 

BUT I would like to have it like this:

arnelo_0-1738438597634.jpeg

 

THANK YOU VERY MUCH FOR YOUR TIME!

KetanKumar
Shopify Partner
37583 3668 12151

@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;}

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
arnelo
Excursionist
22 0 8

Sir, I did, but it's still the same size and not zoomed in