Monday, March 06, 2023
The Great Tit
Updated: 8. 3. 2023, Added: 6. 3. 2023

Fixed background white gap fix on Android/iOS with CSS

If you use background-attachment:fixed; in your CSS for your HTML body, then you may encounter a bug on mobile devices. When you scroll down, background jumps and create a white gap.

You will propably have this setup:

background-attachment:fixed;
background-size:cover;

To fix the issue quick and easy, use the background in pseudo element :after the body like this:

body {
	background:#fff;
}
body:after {
	content:"";
	position:fixed;
	z-index:-1;
	width:100vw;
	height:100vh;
	background:url(images/rocks.png) no-repeat;
	background-size: cover;
}

That's it! I hope it helps.

Did I help you? Fuel our WordPress journey
Beep this article to your friends!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram