Home/ Questions/Q 8595655
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T00:29:16+00:00

I’ve had a great idea for a website, and I think the page that

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0