Absolute images doesn't remain absolute in mobile browsers

Question

I have divs in my web page with background-images, absolute position and -1 z-index in order to make the images static and scroll rest of divs over these images. Its working flawlessly in web browsers but I'm unable to get the same functionality in mobile phones. Mobile views in web browsers shows exactly the way it should work but rest of the divs doesn't scroll over these images in mobile browsers rather, unlike web browsers, the images also scrolls.

Here's the JsFiddle link for the below code.

HTML

<div class="container"> 
    <div class="section1">lorem ipsum dolar imit</div>
    <div class="section3">
       <div class="section3-img"></div>
    </div>
    <div class="section1">lorem ipsum dolar imit</div>      
</div>

CSS

body{margin:0; padding:0;}
.container{height:800px; position:relative;}
.section1{
    width:100%; 
    height:400px; 
    background-color:purple;
    color:white; 
    z-index:10;
}  
.section2, .section3{
    width:100%; 
    height:300px; 
    overflow:hidden; 
    position:relative;
}
.section3-img{
    background-size: cover;
    z-index:-100;
    width:100%;
    height:300px;
    position:absolute;
    background:url('http://i.istockimg.com/file_thumbview_approve/81531733/6/stock-photo-81531733-texture-of-the-oak-stump-background.jpg') 0 top repeat fixed;

}

PS: I'm yet testing on chrome browser in android phone.

Safari mobile does not like background positions. See http://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios — jbrya029, Jun 08 '16 at 04:20

Seika85 · Accepted Answer · 2016-06-14T12:30:48.330

Well, I would rather position a container holding the image fixed. Because, your section3 and section3-img container scroll. So positioning a background-image as fixed would result in the question fixed to what? Obviously mobile browsers define it as fixed to parent. And because the parent container moves with swiping so does the background-image.

I positioned a fixed div: https://jsfiddle.net/mh7eza4e/8/

HTML

<div class="container">
  <div class="bg-img"></div>
  <div class="section1">lorem ipsum dolar imit</div>
  <div class="section3"></div>
  <div class="section1">lorem ipsum dolar imit</div>
</div>

CSS

html,body{margin:0; padding:0;height:100%;}
.container{height:800px; position:relative;}
.section1{width:100%; height:400px; background-color:purple;color:white; z-index:10;} 
.section2, .section3{ width:100%; height:300px; overflow:hidden; position:relative;}

.bg-img{
  position:fixed;z-index:-100;
  width:100%;height:100%;height:100vh;
  /* "height:100%" as a fallback for older browsers, use only if needed */

  background:url('http://i.istockimg.com/file_thumbview_approve/81531733/6/stock-photo-81531733-texture-of-the-oak-stump-background.jpg') 0 top repeat fixed;
  background-size:cover;
}

If multiple fixed background images for each section are what you're after, then I'm afraid that's not possible with pure CSS. You need to use JS from here on.

See here: https://jsfiddle.net/mh7eza4e/17/

JS

$(window).on('scroll', function() {

    var scrolledTop = $(window).scrollTop(),
        windowHeight = $(window).height();

    $('.section').each( function() {
        var $section = $(this),
            elemTop = $section.offset().top,
            sectionHeight = $section.outerHeight();

        if(elemTop-scrolledTop < windowHeight/2 && elemTop-scrolledTop > -sectionHeight) {
            $section.addClass('active');
        } else {
            $section.removeClass('active');
        }
    })
});

$(window).trigger('scroll');

Depending on scroll position relative to the viewport I set an 'active' class to the section currently in viewport. The active section triggers a CSS-transition (using opacity) of the multiple fixed positioned background image containers.

Little side note: defining the background property overwrites all previous defined background-* properties. That's why your `background-size:cover` was not working. I moved it below the background definition. — Seika85, Jun 08 '16 at 09:23
thanks for the perfect solution in this regard but what if i needed to change the background image after the last div and similarly i want to use a new background image after every section div with negative z-index. In case of my problem code i can achieve that functionality very easily but in the answered code, the next image will override the earlier fixed image. any suggestion? — Adil, Jun 13 '16 at 10:51
That would be something like this: https://jsfiddle.net/mh7eza4e/9/. But it's not working in any IE (including Edge) and Chrome earlier than 52. If those need to be supported, than only JS would be an option - but that's not what you asked for. — Seika85, Jun 13 '16 at 12:13
Thanks, I'd marked your answer as answer to this problem. But what i needed is that multiple images background, I'd actually just mentioned the problem with one bg image in order to attain more precision. — Adil, Jun 14 '16 at 04:46
Thank you. But I'm afraid, that that's not possible with pure CSS. This is the closest I came up with using jQuery: https://jsfiddle.net/mh7eza4e/15/ — Seika85, Jun 14 '16 at 07:44

Absolute images doesn't remain absolute in mobile browsers

1 Answers1