Menu
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>
</div>
</div>
203
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.
59
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/
27
david,
I gave you a vote because I appreciate how you linked in the image URLs so that we could see them conveniently. However, your code didn't work for me, and I spent a bunch of time trying to get it right. I'm not saying that the html/css below is optimal yet, but it works for me.
Note: this doesn't work in IE6 because of the cockpit.png transparency, but there are workarounds supposedly: http://24ways.org/2007/supersleight-transparent-png-in-ie6
(btw, that is an awesome blog theme!!)
<html>
<head>
<style type="text/css">
html {
color: White;
background: #040404 url('http://us.starcraft2.com/images/layout/bg-planet-frontpage.jpg') fixed center 300px no-repeat;
text-align: center; }
div#cn {
width: 1200px;
height: 800px;
margin: 0 auto; }
div#bd {
height: 320px;
background-color: #040404; }
div#cockpit {
height: 190px;
background: url('http://us.starcraft2.com/images/layout/bg-footer-bridge-t.png') center top no-repeat; }
div#bottom {
height: 240px;
background-color: #040404;
padding-top: 40px; }
</style>
</head>
<body>
<div id="cn">
<h1 id="hd">
Strarcraft II test header
</h1>
<div id="bd">
long list of bllablablba<br />
long list of bllablablba
</div>
<div id="ft">
<div id="cockpit">
</div>
<div id="bottom">
Courtesy of JohnB
</div>
</div>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
