I've been playing around with a few menu design ideas, and mocked up a site to try them out. The
menus are OK as far as they go, but I'm having trouble with a background image.
I have been trying to set up a background image in the <body> (or in <body class='plain'>), but
when I do so it appears outside the body, as if it were attached to the viewport or perhaps the
HTML. If I move the background image to appear in the <header> there's no problem. I've tried
several variants without success.
CSS is like this:
body {
background-color: #FFF;
background-image: url(../img/clouds_3677.jpg);
background-repeat: no-repeat;
margin: 0 auto;
width: 100%;
max-width: 900px;
padding: 0;
}
body.plain {
max-width: 900px;
border: 0;
border: 1px dashed red; /*(temporary)*/
border-radius: 5px;
}
div#outer {
/* background-color: #DFEFFF; */
width: 100%;
margin: 0 auto;
padding: 0.25em 0.25em;
padding: 0;
}
/* HEADER */
header#banner {
/* when the background image is set here, all is well */
/* background-color: #FFF;
background-image: url(../img/clouds_3677.jpg);
background-repeat: no-repeat;*/
margin-bottom: 1em;
width: 100%;
float: left;
}
I can live with the background being in the <header> if necessary, but I would like to know why
it doesn't work correctly in the <body>. I suspect it may be very simple, but I can no longer
see the wood for the trees. Any suggestions, please ?
It can be seen at http://www.webadit.co.uk/newhmi
Tim Dawson
--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull PA66 6BP
01681 700718
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
