Fixed Position Background on iOS

Question

I have a website that has a full-image fixed background that the content "floats" above. It works fine in desktop browsers, but the fixed background ends up scrolling on iPads and other tablets. This seems to be a common issue, but then I ran across this website, which seems to have a fixed background even on iPad's.

http://confitdemo.wordpress.com/

Any clue how they are pulling that off? I tried:

#content-wrapper.posts-page {
background-attachment: fixed !important;
background-clip: border-box;
background-color: transparent;
background-image: url("image path");
background-origin: padding-box;
background-position: right top;
background-repeat: no-repeat;
background-size: cover;
}

(This was copied from Firebug, which is why it's not shorthand).

But had no luck. Anyone get me pointed in the right direction?

Riot

Answer 1

I think the problem lies in that your table most likely resizes the background, so if you add this declarations, in most likely hood it should get it running just fine.

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

Edit:

If this doesnt work only other reason i can think of is that ios must somehow resize the body size to be as big as the content, what you have to do then is create a div inside the body tag with correct properties

#fixebg{
background: url(image.jpg) top;
height:100%;
width:100%;
position:fixed;
}

Here is a similiar solution:

How can I set fixed position Background image in jquery mobile for iPhone app using Phonegap

Edit - 2:

Added a fiddle you can check:

http://jsfiddle.net/uZRXH/3/

And here is link to try it out on your ipad:

http://fiddle.jshell.net/uZRXH/3/show

Swagman

Sorry, I should have included the full code. I edited the original post to include the full code. – Riot

@Riot Could u send me a link to your site, cause I made a demo and it works perfectly fine for me. – Swagman

added a demo link to the original post. It works fine in regular browsers, but on an iPad the background scrolls. – Riot

@Riot Added a working example that works on both my iphone and ipad – Swagman

I have tried this on iOS mobile and did not get great results with a fixed background image in regards to the image not scaling (even with background: cover). Any solutions for this? – Davidson

Sorry, I worded that wrong. I have tried that solution, and although I got it working, I then had issues with scrollTop. I then found backstretch jQuery plugin that worked. Thanks for the insight as this was the closest solution I could find. – Davidson

Here's a link to a fiddle with an existing background image, the one from the answer was removed: fiddle.jshell.net/uZRXH/140 And also the one to view on the ipad: fiddle.jshell.net/uZRXH/140/show – Knowable

Answer 2

That website uses a trick in mobile browsers, taking advantage of the fact that while background-attachment: fixed doesn't work, position: fixed does, so in mobile browsers it just creates a <div> that remains fixed behind the scrolling content.

Locke

Answer 3

ok, so I allready build that site, the part with a fixed background would get messed up if I wrapped it in a div to give that div a fixed position. So I wrote this and it works on the iPhone.

I've got a fixed header so this was easy to use but anything that's allways at the top of the viewport will do...

        if (//on mobile) {
            var headerH, headerH2, viewportH, sliderH, res
            viewportH = $(window).height(),
            headerH2 = 80 //correction when measuring with fixed header,
            $topheader = $('.top_header'),
            $slider = $('#twinslider') //the element to check for if in viewport;
            function getH() {
                headerH = $topheader.offset().top;
                sliderH = $slider.offset().top;
                res = (((headerH - headerH2) - sliderH) + viewportH) / viewportH;
                if (res > 0 && res < 1.4)  {
                    return res; // thats truthy and a value for further calculation
                } else {
                    return false;
                }
            }
            getH();

            setInterval(function(){ // before i listened to scroll, but this was better for performance
                if (getH()) {//if slider is in viewport
                    $slider.find('li').css({ //the element to set the background pos for
                        'background-position': 'center ' + res * 50 + '%'
                    }, 100);

                }                   
            }, 25); 

        }

and then give the element to give a 'fixed background' a transition on the background-position and you're done. Not that neat though....and I feel like there's a better solution...but this works.

Fulvi

Answer 4

1) z-index: -1; must be added to Breezer's second approach if you have link images otherwise the images are kept hidden (behind the background)

2) On same approach, I had to put the div before the rest of the content as follows or the page was non-scrollable if content is added inside the div tags:

<body> <div id="fixedbg"></div> <!-- CONTENT HERE --> </body>

Matrilateral