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.



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


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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s