Thanks Chris, and others.
I'd agree about the 'wrapper'. It just happens I was rather throwing a page together for my menu
tests, and slipped the background image onto the body. I've moved it now (in my local version
only) to my 'wrapper', which is div#outer, and that works too, and looks much as I had expected
it to on the body.
I see Eric Meyer puts a background image on the body in his Definitive Guide, so I feel I'm in
good company. Just doesn't work for me yet.
Rachel: Yes, positioning works, but it only positions wrt the viewport (or HTML) where it is
appearing. My thought is that it shouldn't be there in the first place.
Tim
On 09/02/2014 19:54, Chris Rockwell wrote:
oThis has never come up for me, so I can't explain (yet) why this happens, but
it appears, at
least in Chrome, that some style attributes don't honor widths, margins, [and
other things I
don't know of] of the body element.
The reason this has never come up for me, is that I would always use a wrapper
of sorts so that
styling of the body element was not necessary:
<body>
<div class="wrapper"> <!-- <-- style this -->
</div>
</body>
On Sun, Feb 9, 2014 at 2:02 PM, Tim Dawson <[email protected]
<mailto:[email protected]>> wrote:
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
<http://www.webadit.co.uk/newhmi>
Tim Dawson
--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull PA66 6BP
01681 700718
__________________________________________________________________________
css-discuss [[email protected]
<mailto:[email protected]>]
http://www.css-discuss.org/__mailman/listinfo/css-d
<http://www.css-discuss.org/mailman/listinfo/css-d>
List wiki/FAQ -- http://css-discuss.incutio.__com/
<http://css-discuss.incutio.com/>
List policies -- http://css-discuss.org/__policies.html
<http://css-discuss.org/policies.html>
Supported by evolt.org <http://evolt.org> --
http://www.evolt.org/help___support_evolt/
<http://www.evolt.org/help_support_evolt/>
--
Chris Rockwell
--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull PA66 6BP
01681 700718
______________________________________________________________________
css-discuss [[email protected]]
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/
