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

Solved

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

RainbowSweets
Excursionist
19 0 3

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? 

Accepted Solution (1)

BSSCommerce-B2B
Shopify Partner
1969 564 566

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

BSSCommerceB2B_0-1725776229389.png

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

BSSCommerceB2B_1-1725776855570.png

Result:

BSSCommerceB2B_2-1725776868267.png

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

Replies 5 (5)
RainbowSweets
Excursionist
19 0 3

Thank you for your reply.

 

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

BSSCommerce-B2B
Shopify Partner
1969 564 566

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

BSSCommerceB2B_0-1725776229389.png

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

BSSCommerceB2B_1-1725776855570.png

Result:

BSSCommerceB2B_2-1725776868267.png

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
Excursionist
19 0 3

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

BSSCommerce-B2B
Shopify Partner
1969 564 566

@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
Excursionist
19 0 3

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