How to recreate eBay New Logo Page in HTML + CSS

Question

I've had a great idea for a website, and I think the page that eBay has created for it's new logo is very interesting. I'm just wondering if anyone could give me any insight on how to recreate it.

http://pages.ebay.com/announcements/new/index.html

I sort of gather that the logo you can see through the gaps is set as the main bg, fixed and the front section just scrolls past it.

Two main questions:

• How do they get the 'front' div to fill the page
• How do they get the bg to change as you scroll down the page.

Thanks!

Answer 1

It's actually quite simple. They have multiple background images that are applied to multiple section elements, then they have applied a fixed background-attachment so that the backgrounds are always in the same position. The result is an element which somewhat functions as a mask to its background.

You can really easily recreate the effect and so understand the implementation with this code:

HTML

<div></div>
<div class="ebay-img1"></div>
<div></div>
<div class="ebay-img2"></div>
<div></div>
<div class="ebay-img3"></div>

CSS

div { height: 600px; background-attachment:fixed; border-bottom: 1px solid black; }
.ebay-img1 { background: black url("http://pics.ebaystatic.com/aw/pics/announcements/new/logo/logo-1.png") no-repeat 50% 0 fixed }
.ebay-img2 { background: black url("http://pics.ebaystatic.com/aw/pics/announcements/new/logo/logo-2.png") no-repeat 50% 0 fixed }
.ebay-img3 { background: black url("http://pics.ebaystatic.com/aw/pics/announcements/new/logo/logo-3.png") no-repeat 50% 0 fixed }

​ See here for this code in situ: http://jsfiddle.net/CAMEn/