Hi there Wisdom,
our friend Beverleyh's code, unfortunately, does not work very well without content. :eek:
Check out this example, which also allows for for IE6's non-rendering of the min-height attribute...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>top and bottom background images</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html {
height:100%;
background-image:url(http://www.coothead.co.uk/images/anim.gif);
background-repeat:repeat-x;
background-position:0 0;
}
body {
min-height:100%;
background-image:url(http://www.coothead.co.uk/images/anim1.gif);
background-repeat:repeat-x;
background-position:0 bottom;
}
#container {
width:1000px;
padding:110px 0;
margin:auto;
}
</style>
<!--[if IE 6]>
<style type="text/css">
body {
height:100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh
orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam.
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna.
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p>
</div>
</body>
</html>
coothead