100% Background Image - CSS 3

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>100% Background Image - CSS 3</title>

<meta name="created" content="Sat, 27 Nov 2010 19:44:02 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="PayneLess Designs">
<meta name="copyright" content="Jan 2004 to present.">
<meta name="robots" content="all">
<meta name="revisit-after" content="60 days">

<style type="text/css">
* { margin: 0; padding: 0; border: 0; }

div#org-img {
position: relative;
z-index: 1;
width: 256px;
height: 256px;
/* background: url(images/rabbit-sm.jpg) no-repeat center scroll; */
}

div#org-img img {
border: 1em ridge #f00;
}

div#org-img p, h1 {
text-align: center;
color: #fff;
}

#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}

#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
z-index: -1;
}

pre {
position: relative;
margin-top: 5%;
margin-left: 2%;
visibility: hidden;
}
</style>

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="site_css/css_2010_iestyle.css">
<![endif]-->
</head>
<body>
<h1>100% Background Image - CSS 3</h1>
<div id="org-img"><img style="width:256px; height: 256px;" src="http://i160.photobucket.com/albums/t184/PayneLess_Designs/Backgrounds/bg_24.jpg" alt=""><p>Original image size:<br>256px by 256px.</p></div>

<div id="bg"><img src="http://i160.photobucket.com/albums/t184/PayneLess_Designs/Backgrounds/bg_24.jpg" alt="">
<pre>
Works in:

    * Opera (any version) and IE both fail in the same way (wrongly positioned, not sure why)
    * Safari / Chrome / Firefox (didn�t test very far back, but recent versions are fine)
    * IE 8+
</pre>
</div>
</body></html>