Interesting Chris. I'v always styled the <body> with margins, positioning,
sometimes padding...etc and it always has an effect.
Rachel, Tim will need to give his element a position of absolute, relative (and
maybe fixed but I'm sure about that one) for z-index to kick in.
Eric
> On February 9, 2014 at 2:54 PM Chris Rockwell <ch...@chrisrockwell.com> 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 <t...@ramasaig.com> 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
> >
> > 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/
> >
>
>
>
> --
> Chris Rockwell
> ______________________________________________________________________
> 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/
______________________________________________________________________
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/
