Absolute images doesn't remain absolute in mobile browsers - css

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.

Answer 1

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.