Fixed background white gap fix on Android/iOS with CSS

min read / Custom Code, WordPress / Share on: Twitter, LinkedIn, Facebook

Post summary: Fix the white gap under fixed background on mobile devices.

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.

0 comments