All things Shopify and commerce
Hello,
We have just launched our new website https://rainbowsweets.ca but have an issue with the mobile version. The background image scrolls with the text. Is there any way to prevent it?
Solved! Go to the solution
This is an accepted solution.
@RainbowSweets , because ios doesn't support the background-attachment css attribute.
So you could follow these step to make your background image fixed
Step 1. Go to Admin -> Online store -> Theme > Edit code
Step 2. Find the file theme.liquid.
Step 3. Add this code after <body>
<div id="background_wrap"></div>
Like this
Step 4: Add this code before </body>
<style>
.gradient {
background: none;
background-image: unset !important;
}
#background_wrap {
z-index: -1;
position: fixed;
height:100%;
width: 100%;
background-size: cover;
background-image: url(https://cdn.shopify.com/s/files/1/0678/9208/4964/files/pink-yellow-Coming-Soon-retro_7a75ede1-870e-46f9-a738-0c7d8585078c.jpg?v=1725772982) !important;
background-repeat: no-repeat;
display: block!important;
background-position: center top;
}
</style>
Like this
Result:
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now
Thank you for your reply.
Do you have an Android phone? I have an iPhone and the background is definitely scrolling,
This is an accepted solution.
@RainbowSweets , because ios doesn't support the background-attachment css attribute.
So you could follow these step to make your background image fixed
Step 1. Go to Admin -> Online store -> Theme > Edit code
Step 2. Find the file theme.liquid.
Step 3. Add this code after <body>
<div id="background_wrap"></div>
Like this
Step 4: Add this code before </body>
<style>
.gradient {
background: none;
background-image: unset !important;
}
#background_wrap {
z-index: -1;
position: fixed;
height:100%;
width: 100%;
background-size: cover;
background-image: url(https://cdn.shopify.com/s/files/1/0678/9208/4964/files/pink-yellow-Coming-Soon-retro_7a75ede1-870e-46f9-a738-0c7d8585078c.jpg?v=1725772982) !important;
background-repeat: no-repeat;
display: block!important;
background-position: center top;
}
</style>
Like this
Result:
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now
Amazing! Thank you so much. It solved my issue and now it looks great!
@RainbowSweets, Glad to help you 😍
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now
We have asked friends and family to test the website and we've gotten some valuable feedback. They also notified us regarding some other issues that we hadn't noticed ourselves. I'm not sure if you know how to resolve this issue, but we were told that the background seems to redraw after scrolling, causing it to flicker after the scroll event completes. This happened both with iphone and Android (Google Pixel 6).
In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024