CODEWITHSUNDEEP
htmlcss
Learning
Learning

Reputation: 20001

css make background image position fixed and scroll content up

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

They are keeping background image fixed and contents over it. I am not sure how they are doing it it possible with css only or they are using java-script.

I am still trying to figure it out.

Any fixed example or pointer would be great to start with

Upvotes: 7

Views: 14853

Answers (3)

Felix A J
Felix A J

Reputation: 6470

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

Upvotes: 4

AmmarCSE
AmmarCSE

Reputation: 30557

Try adding 

#myBackgroundContainer{
    background-attachment:fixed;
}

From the docs

the background-attachment CSS property determines whether that image's position is fixed within 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>

Upvotes: 7

Dmitriy
Dmitriy

Reputation: 4503

* {
    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>

Upvotes: 10

Related Questions