CODEWITHSUNDEEP
htmlcssipadmobilefixed
JeremyE
JeremyE

Reputation: 1418

Fixed Position Background on iOS

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?

Upvotes: 19

Views: 72340

Answers (4)

Rafael
Rafael

Reputation: 108

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>

Upvotes: 0

Sjerp van Wouden
Sjerp van Wouden

Reputation: 41

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.

Upvotes: 0

rev087
rev087

Reputation: 163

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.

Upvotes: 7

Breezer
Breezer

Reputation: 10490

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

Upvotes: 7

Related Questions