Solved

Make Background Image Fixed Where It Doesn't Move On Mobile When Scrolling Through

sangsangmiller
New Member
9 0 0

On  desktop View, the background remains fixed while everything scrolls smoothly over it. However, this is not working on mobile View , using GIF as my background image, it glitches and splits like in the middle on mobile . I aim for the content to glide over my custom background image seamlessly on Mobile View too.
website:www.craftedtribal.in 

Accepted Solution (1)

tim
Shopify Expert
3274 235 1183

This is an accepted solution.

Fixed background actually requires pretty significant device processing power, that's why it may not work as expected (or at all -- some mobile browsers simply ignore it) on mobiles or may make your site unusable.
And then it's an animated GIF, which makes things even worse

 

The usual workaround is to create a fixed element (or pseudo-element as in the code below) and assign background to that element instead:

body:before {
 background: url({{"giphy.gif" | file_url}}) center;
 background-size: cover;

 content: "";
 position: fixed;
 width: 100%;
 height: 100%;
}

 The rule above is meant to replace the one you've added (body { .. })

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.

View solution in original post

Replies 6 (6)

tim
Shopify Expert
3274 235 1183

This is an accepted solution.

Fixed background actually requires pretty significant device processing power, that's why it may not work as expected (or at all -- some mobile browsers simply ignore it) on mobiles or may make your site unusable.
And then it's an animated GIF, which makes things even worse

 

The usual workaround is to create a fixed element (or pseudo-element as in the code below) and assign background to that element instead:

body:before {
 background: url({{"giphy.gif" | file_url}}) center;
 background-size: cover;

 content: "";
 position: fixed;
 width: 100%;
 height: 100%;
}

 The rule above is meant to replace the one you've added (body { .. })

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
sangsangmiller
New Member
9 0 0

I am attempting to replicate this website https://revivaldxb.com

 

or is it possible to use Object-fit approach to use fit the gif background ?

tim
Shopify Expert
3274 235 1183

Yes, that site uses img element with object-fit: cover; instead of background as suggested above. 

Both approaches produce similar results. 

Background approach does not introduce extra elements, image will probably be better indexed  by search engines if that's the goal.

Background image would probably be loaded later than image element since browser may prioritise actual content over background image.

Big benefit of a separate img element is that you should potentially be able to replace it with video element if wanted.

 

As to which one is more performant -- this will require more formal testing, I can't tell from the top of my head.

As I said, scrolling over fixed image is a heavy operation on mobile and when it's animated GIF it is even more taxing. Mobile browsers will try to optimize, sometimes by skipping rendering some portions of the screen
(in my limited comparison both sites flashed  white rectangle at the bottom).

 

 

However, I do not see missing footer on my devices...

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
sangsangmiller
New Member
9 0 0

Setting the z-index : -1 resolved all the missing text issues I was experiencing because the :before element was overlapping my text. Thank you so much for fixing it; without you, I wouldn't have been able to figure it out.

sangsangmiller
New Member
9 0 0

Thank you, this fixed the background issue for me. However, I'm experiencing an unnecessary white box glitch when scrolling down on mobile.Also my footer have dissapear

 

 

IMG_0157.jpg

sangsangmiller
New Member
9 0 0

now my footer text , sub menu policies text dissapear.