tags:

views:

22

answers:

1

So here's the code as I have it...

<head>

<style type="text/css">

* { margin : 0; padding : 0; }

html, body { height:100%; color : #FFF;}

div#bgcontext { position : absolute; width : 100%; height : 100%; overflow : hidden; }

div#background { position : relative; right : 50%; width : 100%; height : 100%; z-index : -20; text-align : center;}

div#background img { min-height: 100%; min-width : 1600px; max-width : 100%; margin-right : -100%;}

</style>

</head>

<body>

<div id="bgcontext">

<div id="background"><img src="assets/bg.jpg" /></div>

</div>

</body>

As you can see, I've setup a centered and scaling image that accommodates a full screen resolution--but, I realized after I set all this up... this will only work if the content doesn't require you to scroll.

Halp.

+2  A: 

Aha! I actually haven't used the "fixed" positioning property much, but changing

div#background { position : relative; right : 50%; width : 100%; height : 100%; z-index : -20; text-align : center;}

to

div#background { position : fixed; right : 50%; width : 100%; height : 100%; z-index : -20; text-align : center;}

Solved the problem perfectly! Sweetness.... Mmmm CSS

J from the Bay