css scroll changing picture trick

The markup

Each image will need it’s only container. I’ve used a header div and a content div.

<html>
  <head>
    ... 
  </head>
  <body>
    <div>
      ...
    </div>
    <div>
      ...
    </div>
  </body>
</html>

The CSS

Now you assign each image as the background image of each div. The positioning should always be the same, and background-attachment should be set to fixed.

...
.header {
  padding:40px 40px 40px 300px;
  background: #dbded1 url(images/cuckoo_color.jpg) no-repeat 20px 20px fixed;
}
...
.content {
  padding:10px 40px 10px 300px;
  background: transparent url(images/cuckoo_bw.jpg) no-repeat 20px 20px fixed;
}
...

 

What is important is you have the same position for the image in different div.

 

HERE are some examples“:

1. Two pictures 

 2. Multiple Pictures

3. Paper Shredder

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s