Css make fixed position of background image and scroll content up

Question

How can we do something similar, as in this example http://theme.nileforest.com/html/mazel-v1.1/home-text-rotator1.html

They capture the background image and the content above it. I am not sure how they do it with css only or they use java script.

I'm still trying to figure it out.

Any fixed example or pointer would be good to start with

Answer 1

* { padding: 0; margin: 0; box-sizing: border-box; } .block-parallax-1 { overflow: hidden; position: relative; } .block-parallax-1 .parallax-bg { background-attachment: fixed; background-image: url('http://bygaga.com.ua/uploads/posts/1354003535_podborka_krasivih_moto_759-58.jpg'); background-position: 0px 0px; background-repeat: repeat; height: 100%; position: absolute; width: 100%; min-width: 1170px; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } .block-parallax-1 .md-box { padding: 200px 0 200px; background: rgba(0, 0, 0, 0.75); position: relative; height: 100%; text-align: center; } .block-parallax-1 .md-box h1 { color: #fff; } .block-parallax-2 .parallax-bg { background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_z73DvFVC1ek9ZsGdCpvpDW_AwRqOWgG6IP2wOXrVibxz_EDV'); } h2 { color: #555; text-align: center; padding: 25px 0; margin: 0; } 

 <section class="block-parallax-1"> <div class="parallax-bg"></div> <div class="md-box"> <h1>background-attachment:fixed</h1> </div> </section> <section style="min-height:400px;"> <h2>background</h2> <p></p> </section> <section class="block-parallax-1 block-parallax-2"> <div class="parallax-bg"></div> <div class="md-box"> <h1>background-attachment:fixed</h1> </div> </section> 

Answer 2

Try to add

 #myBackgroundContainer{ background-attachment:fixed; } 

From docs

The CSS snap property to the background determines whether the position is fixed in the viewport or scrolls along with its containing block.

 body { background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSHC-qntWkhfC_CP9UcIle2WQItuhlbFS_AGK3WdtrAc4Pp6OIu'); background-repeat: no-repeat; background-attachment: fixed; } #Partition{ background:gray; height:200px; } 

 <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div id="Partition"></div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> <div> scroll me </div> 

Answer 3

I created a simple script with background-attachment: fixed; http://jsfiddle.net/afelixj/v0x5ved6/