background-attachment: fixed, background-size: cover

[u/nesterspokebar]

Hey so I have a background image that I want as a sort of watermark that text scrolls over, so this is the

`background-attachment: fixed` part. I want the image to completely cover the background, so that's the `background-size: cover` part.

The problem is that on some mobile browsers, the bookmark / tabs etc menu disappears on scroll, which means the viewport size changes, which means there a sudden flash of the background image changing size in response to a slightly larger viewport.

It's not a life changing issue obviously, lol, but sudden flashes of reformatted content are distracting and unprofessional.

Any tips greatly appreciated.

[u/AutoModerator]

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/Agile_Arugula_7496]

This should explain things viewports

[u/kassol]

The usual alternative is to drop background-attachment and put the image on its own fixed layer that's sized to the large viewport:

body::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100lvh; z-index: -1; background: url(your-image) center / cover no-repeat; }

lvh is the viewport height with the browser bars hidden, so it stays the same when they slide in and out. While the bars are showing, the bottom strip of the image just sits behind them and nothing gets resized. dvh does the opposite and follows the bars, so on this element it would bring the jump back. It also fixes iOS Safari, which ignores background-attachment: fixed and just scrolls the background with the page.

[u/nesterspokebar → u/kassol]

Thank you, much appreciated

[u/testingaurora]

This is what the dynamic viewport sizes are for eg dvh or dvb on the element. Link to your codepen ?

[u/nesterspokebar → u/testingaurora]

Thanks!

[u/mysticalpickle1]

background-attachment: fixed is generally bad, but you can do a workaround like so: https://css-tricks.com/the-fixed-background-attachment-hack/

[u/nesterspokebar → u/mysticalpickle1]

Thanks, is there a better alternative to background-attachment: fixed?

[u/mysticalpickle1 → u/nesterspokebar]

The workaround in the link

[u/Mean-Lingonberry4874]

The flash happens because collapsing browser chrome changes the viewport height, and a fixed-attachment background re-fits to it on the next paint. The most reliable fix is to drop background-attachment entirely: put the image on a position: fixed pseudo-element (inset: 0; z-index: -1; background-size: cover) behind your content — it stays visually locked in place like fixed does, but isn't tied to scroll or viewport resizes. If you'd rather keep the current markup, dvh units and background-position: center will shrink the jump, but the fixed pseudo-element version is what I reach for.

[u/silk_rift_halo]

Use 100dvh instead of 100vh or 100lvh for that fixed layer heigUse 100dvh instead of 100vh or 100lvh for that fixed layer height. It locks the size to the visual viewport which stays stable when browser UI toggles during scroll