Webbers Corner

Full Version: How did this guy do this?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
look at the W logo then scroll downEek

I'm just curious how that was done? Doesn't look like flash in the source?

http://www.westciv.com/style_master/acad..._tutorial/
a simple position: fixed; will do that in the CSS, but i don't see how he did the changing from blue to white.
i was curious to, took me quite a long time to figure it out.
it's the whol background which they set it fixed, not only the logo. they have 2 different background, one for the header, the other for the main background

this is the code for the main background

Code:
body {font-size: 100%;
font-family: Verdana, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #fff;
background-image: url(images/page_bg.gif);
background-repeat: no-repeat;
background-attachment: fixed;
}


this one the header

Code:
#header {background-color: #091c5a;
background-image: url(images/banner.gif);
background-repeat: no-repeat;
background-attachment: fixed;
}


got it from here (screen.css)
2x simple codes, such a cool result, clever eh?

x4cer Wrote:
i was curious to, took me quite a long time to figure it out.
it's the whol background which they set it fixed, not only the logo. they have 2 different background, one for the header, the other for the main background

this is the code for the main background

Code:
body {font-size: 100%;
font-family: Verdana, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #fff;
background-image: url(images/page_bg.gif);
background-repeat: no-repeat;
background-attachment: fixed;
}


this one the header

Code:
#header {background-color: #091c5a;
background-image: url(images/banner.gif);
background-repeat: no-repeat;
background-attachment: fixed;
}


got it from here (screen.css)
2x simple codes, such a cool result, clever eh?


I might have to steal that little trick. thx for the good answer x4cer.Nod

thats quite clever.  it is very simple but the idea is nice.  although them images are huge so would affect loading time quite a lot.
thx for the imput guys, I also posted it on another site and now I do notice that you don't get the same effect on IE 6, but on Opera, Firefox and IE7 it works fineSmile
Reference URL's