CODEWITHSUNDEEP
htmlioscssiphonebackground-attachment
Jordan U.
Jordan U.

Reputation: 323

Background-Attachment: Fixed Doesn't Work On iOS

I'm trying to find a solution to the problem I'm having with fixed backgrounds on iOS devices. I would rather not have to redesign everything for this website, and I'm hoping that some CSS changes can fix it. This is what the site looks like on iPhones, and this is what it should look like. The CSS code I'm using is as follows:

.container {
    min-width: 320px;
    max-width: 480px;
    margin: 0 auto;
}

.fixed-background {
    height: 800px;
    -webkit-backgound-size: cover;
    -o-backgound-size: cover;
    -moz-backgound-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    overflow: auto;
}

I've also tried using a @media query to fix it for iOS using some posts on stackoverflow, but this didn't seem to have any effect:

@media screen and (min-color-index:0) and (-webkit-min-device-pixel-ratio:0) {
    .fixed-background {
        background-attachment: scroll;
    }
}

HTML

<div class="fixed-background bg-1">
    <div class="container">
        <div class="title">
            <h1>ROOK PROPERTY<br>MANAGEMENT INC.</h1>
            <h2>CONDOMINIUM MANAGEMENT</h2>
        </div>
    </div>
</div>

Upvotes: 3

Views: 23345

Answers (4)

gkri
gkri

Reputation: 1993

I used this in addition to the existing CSS, and it worked for me:

  @supports (-webkit-touch-callout: inherit) {
    background-attachment: scroll;
  }

Found the solution in this past question: Fixed background image with ios7

Upvotes: 0

Tony White
Tony White

Reputation: 1

I am not sure if this will help I found a general solution for Background Position Fixed on iOS.

And it works really well with recent iPads.

Feel free to copy!

Just beneath the body tag add a

<div id="iPad"></div>

Then style that as:

div#iPad { 
    position: sticky; 
    background: <your image + settings>; 
    top: 0; 
    margin: 0; 
    height: 100vh; 
    margin-top: -100vh; 
    z-index: -1 }

I put it on all pages of my site. But you can see it in action on this really long music page.

It works!!

Took me a while to come up with this.

Note you can only see this on iOS tablet. I didn't implement it for mobiles. But possible the code would work just as well.

Upvotes: 0

Louis Philippe
Louis Philippe

Reputation: 185

To all my div with fixed background I add the classes class="parallax iparaxify paraxify" And in my main css file I have: 

.parallax {
width: 100%;
background url(../images/bg.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

And finally make it parallax for everything except i products 

.paraxify {
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
}

At the end deactivate position:fixed for ipad, iphone and ipod with jquery 

// adds mobile class, and mobile os to html tag
jQuery(document).ready(function($){
var deviceAgent = navigator.userAgent.toLowerCase();

if (deviceAgent.match(/(iphone|ipod|ipad)/)) {
$('.iparaxify').removeClass('paraxify');
}
});

Upvotes: -2

Murilo Ferreira
Murilo Ferreira

Reputation: 61

I just went through the same issue, and this is how I solved it.

First, you need to declare your body and html to be 100% wide and 100% tall:

html, body{
	width: 100%;
	height: 100%;
}

Then, the scrolling on your page can NOT be done by the body: you must wrap it on a container. This container needs three parameters: overflow:scroll, width: 100% and height: 100%. I recommend wrapping the entire site in it:

#wrapper{
		width: 100%;
		height: 100%;
		overflow: scroll;
	}

If you don't like how it scrolls, you can also try adding -webkit-overflow-scrolling: touch.

Hope that helps you/whoever comes looking for this!

Upvotes: 5

Related Questions