Make Background Image Fixed Or Where It Doesn’t Move On Mobile When Scrolling

RainbowSweets · ‎09-07-2024

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?

BSSCommerce-B2B · ‎09-08-2024

@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

View solution in original post

RainbowSweets · ‎09-08-2024

Thank you for your reply.

Do you have an Android phone? I have an iPhone and the background is definitely scrolling,

BSSCommerce-B2B · ‎09-08-2024

@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

RainbowSweets · ‎09-08-2024

Amazing! Thank you so much. It solved my issue and now it looks great!

BSSCommerce-B2B · ‎09-08-2024

@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

RainbowSweets · ‎09-08-2024

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

Make Background Image Fixed Or Where It Doesn’t Move On Mobile When Scrolling

Make Background Image Fixed Or Where It Doesn’t Move On Mobile When Scrolling

Community Blog Articles