Curious; what effect is this and how do I replicate this?

Freeway
1

You probably know this trick you show to your kids;
frown your face, and as you move your hand down- and upwards in front of it, your face appears with a big smile and vice versa …

This effect is also shown on a couple of websites; a background image is shown, and as you scroll down the page, a new static background image appears underneath the DIV …

See link for the example(s), it’s used allthrough the site.

I also remember this effect on other sites; as you scroll up or down, the background image of a DIV shifts up or down in it’s DIV. What is this, and how can I replicate this behaviour in Freeway?

Thanks in advance!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Okay, I seemed to be perfectly able to discover it myself apparently :slight_smile:

The whole thing seemed to be pure CSS based, so here for you entertainment the code, relevant css and demo:

HTML (bare structure)

<html>
    <body>
        <div id="PageDiv">

            -----------

            <div>
                <div id="header"></div>
                <div id="body"></div>
                <div id="footer"></div>
            </div>

            -----------

        </div>
    </body>
</html>

CSS :

#header { 
    background-image:url("Resources/sweetbasil_bar.jpg"); 
    background-repeat:no-repeat; 
    background-attachment:fixed; 
    background-position:center top; 
    background-size:cover 
}

#footer { 
    background-image:url("Resources/tuna.jpg"); 
    background-repeat:no-repeat; 
    background-attachment:fixed; 
    background-position:center bottom; 
    background-size:cover 
}

And here the demo: http://fwdemo.rvanheukelum.com/static-background/

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

There have been some wonderful example of this layered type of effect on
the list previously. One of my favorite new css properties is the
background-size property,

http://www.w3schools.com/cssref/css3_pr_background-size.asp

–
Ernie Simpson

On Mon, Dec 31, 2012 at 5:03 AM, Richard van Heukelum <
email@hidden> wrote:

Okay, I seemed to be perfectly able to discover it myself apparently :slight_smile:

The whole thing seemed to be pure CSS based, so here for you entertainment
the code, relevant css and demo:

HTML (bare structure)

<html>
    <body>
        <div id="PageDiv">

            -----------

            <div>
                <div id="header"></div>
                <div id="body"></div>
                <div id="footer"></div>
            </div>

            -----------

        </div>
    </body>
</html>

CSS :

#header {
    background-image:url("Resources/sweetbasil_bar.jpg");
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center top;
    background-size:cover
}

#footer {
    background-image:url("Resources/tuna.jpg");
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center bottom;
    background-size:cover
}

And here the demo: http://fwdemo.rvanheukelum.com/static-background/

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options