russel walker
New member
I want a static background image with a white page about 80% width floating over the background with a small shadow. When you scroll down the page the background should also remain static so its just the page scrolling/floating up and down over the background.
This is what I manged to get so far:
<html>
<head>
<style type="text/css">
body {background-image:url(background.png);}
</style>
</head>
<body>
<div style="background-image:url(page.png);
background-repeat:repeat-y;
margin-top:-8px;
margin-bottom:-8px;
margin-left:auto;
margin-right:auto;
width:80%;">
</div>
</body>
</html>
Except This page has no shadow and when you scroll down the background moves with it but I need it to stay put so it looks like the page is floating over the background. I tried using CSS shadows but w3schools shows it's not supported in IE, which is a problem. I just can't figure it out cos I'm still learning all of this. Is there any other way to do this?
This is what I manged to get so far:
<html>
<head>
<style type="text/css">
body {background-image:url(background.png);}
</style>
</head>
<body>
<div style="background-image:url(page.png);
background-repeat:repeat-y;
margin-top:-8px;
margin-bottom:-8px;
margin-left:auto;
margin-right:auto;
width:80%;">
</div>
</body>
</html>
Except This page has no shadow and when you scroll down the background moves with it but I need it to stay put so it looks like the page is floating over the background. I tried using CSS shadows but w3schools shows it's not supported in IE, which is a problem. I just can't figure it out cos I'm still learning all of this. Is there any other way to do this?