CODEWITHSUNDEEP
css
Adam
Adam

Reputation: 1459

How to create fixed background scrolling effect without background image?

I have a horizontally and vertically centred image on a page. I would like it so when the user scrolls down, the content below it actually comes up, as if the top content is fixed. Like this effect here... http://tympanus.net/codrops/2013/05/02/fixed-background-scrolling-layout/

Only problem is for that effect they use the background-attachment: fixed property. I cannot use this as I need the image to be content (it will actually be changed to HTML5 video).

My code is here... http://jsfiddle.net/5jphd/1/

HTML

<div class="image">
    <img src="http://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg">
    <div class="text">Scroll down</div>
</div>
<div class="wrap">
    Here is some content
</div>

CSS

html, body {height: 100%}

body {
    padding: 0;
    margin:0;
    font-family: sans-serif;
}
.image {
    position: relative;
    left: 0px;      
    height: 100%;
    background-position: 50% 50%;
    background-size: cover;
    background-attachment: scroll;
    text-align: center;
}
img {
  max-width: 90%;
  max-height: 70%;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.text {
    position: absolute; 
    bottom: 20px;
    left:50%;
    margin-left: -44px;
}
.wrap {
    background-color: lightblue;
    text-align: center;
    padding: 100px;
    font-size: 30px;
    min-height: 1000px;
}

Is this possible to do with this markup? So when you scroll down the content will rise up and overlap the image.

Upvotes: 0

Views: 16054

Answers (2)

Adam
Adam

Reputation: 1459

Ok i have done it, this is what I wanted to achieve. I simply made the video and scroll text position:fixed, and made the main body content position:relative - http://jsfiddle.net/5jphd/4/

html, body {height: 100%}

body {
    padding: 0;
    margin:0;
    font-family: sans-serif;
}
.image {
    position: relative;
    left: 0px;      
    height: 100%;
    background-position: 50% 50%;
    background-size: cover;
    background-attachment: scroll;
    text-align: center;
}
img {
  max-width: 90%;
  max-height: 70%;
  margin: auto;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
}

.text {
    position: fixed;    
    bottom: 20px;
    left:50%;
    margin-left: -44px;
}
.wrap {
    background-color: lightblue;
    text-align: center;
    padding: 100px;
    font-size: 30px;
    min-height: 1000px;
    position:relative;
}

Upvotes: 1

Casey Dwayne
Casey Dwayne

Reputation: 2169

JSFiddle

I think this is what you're essentially asking for. Keep aspect ratios in mind, this is what an hd vieo would probably look like on a 320x480 or so.

#bg {
    position:absolute;
    position:fixed;
    top:0;
    width:100%;
    height:100%;
    margin:auto;
    overflow:hidden;
    z-index:-1;
}
#bg img { max-width:100%; }

Upvotes: 0

Related Questions