hey, I was wondering if it were possible to have more than one background image for the body area, defined in different locations, say I want one at the very top, and then one at the very bottom, in which would both repeat-x. Any help would be greatly appreciated. Thanks, Jeff.Hi -
Why not use the second as a background for the footer, or some other element that's positioned where you want it to be?
ElI have the same issue, could you post a code pls?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
<title>Two backgrounds</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-88559-1">
<meta name="Content-Style-Type" content="text/css">
<style type="text/css">
* { margin: 0; padding: 0; color: #000; text-align: left;
font-size: 100%; font-weight: normal; text-decoration: none;
font-family: 'trebuchet ms', sans-serif; list-style: none; }
html {
height: 100%;
background-image: url(bottom.png); // BOTTOM bg image!!
background-color: #FFF;
background-repeat: repeat-x;
background-position: bottom;
}
html body {
min-height: 100%;
background-image: url(top.png); // TOP bg image!!
background-color: transparent;
background-repeat: repeat-x;
}
* html body { height; 100%; /*sorry but IE needs this hack*/ }
</style>
</head>
<body>
</body>
</html>
There are problems with this, if your page will have verticle scroll you cannot use absolute positioning (or relative i think) and when you are using floats you must clear them just before the </body> tag.Thank you, I will give that code a shot. Too bad it isn't in compliance with W3C with the hack and all. Maybe I will try to make it work and be valid at the same time. Wish me luck. Jeff.Thank you, I will give that code a shot. Too bad it isn't in compliance with W3C with the hack and all. Maybe I will try to make it work and be valid at the same time. Wish me luck. Jeff.
The hack doesn't make it invalid. The comment syntax is off, and it should be * html body{height:100%;} but then it will be valid.
If I understand it correctly, CSS 3 supports multiple backgrounds on an element. But CSS 3 is a long ways off.Sorry about that mistake, MstrBob is correct, it should have been
* html body{height:100%;}
Thanks for pointing that out!
Why not use the second as a background for the footer, or some other element that's positioned where you want it to be?
ElI have the same issue, could you post a code pls?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
<title>Two backgrounds</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-88559-1">
<meta name="Content-Style-Type" content="text/css">
<style type="text/css">
* { margin: 0; padding: 0; color: #000; text-align: left;
font-size: 100%; font-weight: normal; text-decoration: none;
font-family: 'trebuchet ms', sans-serif; list-style: none; }
html {
height: 100%;
background-image: url(bottom.png); // BOTTOM bg image!!
background-color: #FFF;
background-repeat: repeat-x;
background-position: bottom;
}
html body {
min-height: 100%;
background-image: url(top.png); // TOP bg image!!
background-color: transparent;
background-repeat: repeat-x;
}
* html body { height; 100%; /*sorry but IE needs this hack*/ }
</style>
</head>
<body>
</body>
</html>
There are problems with this, if your page will have verticle scroll you cannot use absolute positioning (or relative i think) and when you are using floats you must clear them just before the </body> tag.Thank you, I will give that code a shot. Too bad it isn't in compliance with W3C with the hack and all. Maybe I will try to make it work and be valid at the same time. Wish me luck. Jeff.Thank you, I will give that code a shot. Too bad it isn't in compliance with W3C with the hack and all. Maybe I will try to make it work and be valid at the same time. Wish me luck. Jeff.
The hack doesn't make it invalid. The comment syntax is off, and it should be * html body{height:100%;} but then it will be valid.
If I understand it correctly, CSS 3 supports multiple backgrounds on an element. But CSS 3 is a long ways off.Sorry about that mistake, MstrBob is correct, it should have been
* html body{height:100%;}
Thanks for pointing that out!