[Support request] Fullscreen fixed background image on iOS

[Jem]

Hi

I’m having a problem with a fullscreen background image (with an additional gradient), everything works fine except on my clients iPhone. It’s the apparently classic problem on iOS of the background extending to cover the content rather than fitting the screensize, and also scrolling causes the image to jump about. I’m hampered by not having an iPhone to test on, though it seems to work fine in various emulators.

I’ve used this CSS to achieve it:

html, body {
    height: 100%;
}

body {		
	-webkit-overflow-scrolling: touch;
}

body:after {
    content:"";
    position:fixed; /* stretch a fixed position to the whole screen */
    top:0;
    height:100vh; /* fix for mobile browser address bar appearing disappearing */
    left:0;
    right:0;
    z-index:-1; /* needed to keep in the background */
    background-image: 	linear-gradient(to right, #111600 0%, rgba(17,22,0,0.9) 250px, rgba(17,22,0,0.7) 60%,rgba(17,22,0,0) 100%), /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    					url(https://website.com/wp-content/uploads/2018/11/bgrd8desk.jpg);
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-position: top right;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111600', endColorstr='#00111600',GradientType=1 ); /* IE6-9 */		
	-webkit-overflow-scrolling: touch;
}

Am I overthinking this? Any ideas much appreciated.

[Tom]

Hi there,

I’m not too familiar with iOS specific issues like this, but what happens if you remove background-attachment: fixed? I know iOS has issues with that sometimes.

[Author]

Posts