How is this image effect created?

Question

Hi!

I have looked at this page for some time now. Amazing, really. But I can't tell how the background image effect that happens on scroll works. Have gone through the code found that they are using Jquery plus a number of scrolling plugins, but nothing about the images that I can see.

How would you say that it's done?

The site: http://herohousing.org/UBBT/

Answer 1

This trick is quite simple and just needs some CSS where each panel has a background image that is fixed:

<style type="text/css">
    div {
        height: 100%;
        background-image: url(http://sstatic.net/so/img/logo.png);
        background-attachment: fixed;
        border: thin solid;
    }
    div.a {
        background-repeat: repeat-x;
        background-color: #FDD;
    }
    div.b {
        background-repeat: repeat-y;
        background-color: #DFD;
    }
    div.c {
        background-repeat: no-repeat;
        background-color: #DDF;
    }
</style>

<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>

Here I’m using the same background image but the different background color and image repeat should show you that it’s three different elements.

---

Edit    Ok, it seem’s that some doubt what I am writing. And in fact, the quoted site uses jQuery for this. But only to fit the image to the width and height of the browser’s viewport since you cannot size a background image yet. CSS 3 specifies a background-size property but its support is still proprietary using the vendor specific prefix like -khtml- (Konqueror), -moz- (Gecko based browsers like Firefox), -o- (Opera) and -webkit- (WebKit based browsers like Safari).

If you can abstain from that, you can use the CSS technique I showed you.

Answer 2

It's 4 divs with a different background image for each, what makes the effect work particularly well is the "background-attached: fixed;" property to stop the background scrolling.

If you download Firebug for Firefox, you can inspect the div's and observe how the CSS makes the page behave and attempt to replicate it for yourself.

Really nice looking effect I must admit :-)