PDA

Click to See Complete Forum and Search --> : backgrounds..2 of them?

xhunter
04-19-2005, 07:06 PM
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.
LJK
04-19-2005, 11:21 PM
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?

El
Uni
04-21-2005, 09:06 AM
I have the same issue, could you post a code pls?
Scleppel
04-21-2005, 10:03 AM
<!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.
xhunter
04-22-2005, 03:10 PM
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.
MstrBob
04-22-2005, 03:21 PM
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.
Scleppel
04-23-2005, 07:43 AM
Sorry about that mistake, MstrBob is correct, it should have been
* html body{height:100%;}
Thanks for pointing that out!