How did Blizzard achieve the layered cockpit view for the Starcraft II website?

Question

Go to the Starcraft II website at http://us.starcraft2.com/ and scroll down to the bottom of the page. Notice how it appears like you are looking out of a cockpit.

As you scroll up and down the stars move independently from the cockpit windows creating a layered effect.

How do they get two images to move independently of each other?

Edit: Thanks for the replies below. I did notice they were using a transparent .png image, but I was interested in how they got the "sliding" effect, where the planet comes into view as you scroll down.

I didn't have my dev environment available last night to work through it, but I figured it out now.

It is achieved by having a pair of nested div tags. The background of the parent one is 'fixed' and the background of the child one is set to 'scroll.' The relevant css is below:

<style type="text/css">
    .parent 
    {
        background: url("/Images/Fixed Image.png") no-repeat fixed 50% 100% transparent;
        position: relative;
        height: 800px;
    }
    .parent div
    {
        background: url("/Images/Scrolling Image.png") no-repeat scroll 50% 190px transparent;
        height: 100%;
    }
</style>

And the html:

<div class="parent" >
    <div>
        &nbsp;
    </div>
</div>

Answer 1

The starfield doesn't move, only the cockpit does. What you are seeing on the rest of the page isn't the actual background of the site; the starfield is the background, but it's masked.

Edit: To be specific: The cockpit is a PNG with transparent windows; showing the true background of the page under it.

Answer 2

this is the footer of the page: http://us.starcraft2.com/images/layout/bg-footer-bridge-t.png as you can see the windows are transparent, so you can see the background of the page.

and the planets are just in the bottom background of the body: http://us.starcraft2.com/images/layout/bg-planet-frontpage.jpg

you can test it your self

html:

<div id="cn">
<div id="hd">
Strarcraft II test header
</div>
<div id="bd">
long list of bllablablba
</div>
<div id="ft">
</div>
</div>

css:

body {
 background: url('http://us.starcraft2.com/images/layout/bg-planet-frontpage.jpg') center bottom no-repeat fixed;
}

div#cn{
 width: 1199px;
 margin: 0 auto;
}

div#ft{
 height: 190px;
background: url('http://us.starcraft2.com/images/layout/bg-footer-bridge-t.png')
}

see a live example here: http://jsfiddle.net/APpXn/

Answer 3

Try playing with the z-index css tag. what it does renders div's in different layers so they might have something like

<div id="layer0"></div>
<div id="everythingElse"><div>

and

#layer0
{
 width: 100%;
 height: 100%;
 background: {The Background};
 z-index: 0;
}

#everythingElse
{
 z-index: 1;
}

Answer 4

I figured out how they did it and put the answer in the original post after the "Edit:" mark.