Re: [css-d] Background image on body appears to be in viewport or HTML
Hi - I think you have to give it a position and include a z-index
instruction to tell it to put the image at the "back", eg
background-attachment: fixed;
background-position: 50% 60px;
margin: 30px 0px 0px 0px;
z-index: 1;
}
That, above, is taken from a very old style sheet; I wouldn't use pixels
doing this now.
Rachel
On 09/02/2014 19:02, Tim Dawson 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 (or in
), 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 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 if necessary, but
I would like to know why it doesn't work correctly in the . 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
__
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/
Re: [css-d] Background image on body appears to be in viewport or HTML
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:
On Sun, Feb 9, 2014 at 2:02 PM, Tim Dawson 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 (or in 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 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 if necessary, but I
> would like to know why it doesn't work correctly in the . 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/
Re: [css-d] Background image on body appears to be in viewport or HTML
Interesting Chris. I'v always styled the 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 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:
>
>
>
>
>
>
>
> On Sun, Feb 9, 2014 at 2:02 PM, Tim Dawson 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 (or in > 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 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 if necessary, but I
> > would like to know why it doesn't work correctly in the . 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/
Re: [css-d] Background image on body appears to be in viewport or HTML
>> Interesting Chris. I'v always styled the with margins, positioning, sometimes padding...etc and it always has an effect. But have you applied colors, images to that? This pen shows what I'm referring to (and I've never experienced because of my mark-up conventions): http://codepen.io/anon/pen/fkyEF. Notice the border and padding honor the width, but not the color. I wonder why... __ 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/
Re: [css-d] Background image on body appears to be in viewport or HTML
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:
On Sun, Feb 9, 2014 at 2:02 PM, Tim Dawson mailto: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 (or in ),
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
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 if necessary, but I
would like to know
why it doesn't work correctly in the . 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/
Supported by evolt.org --
http://www.evolt.org/help___support_evolt/
Re: [css-d] Background image on body appears to be in viewport or HTML
On 2/9/14, 12:11 PM, Chris Rockwell wrote:
Interesting Chris. I'v always styled the with margins,
positioning, sometimes padding...etc and it always has an effect. But have
you applied colors, images to that? This pen shows what I'm referring to (and
I've never experienced because of my mark-up conventions):
http://codepen.io/anon/pen/fkyEF.
Notice the border and padding honor the width, but not the color. I wonder
why...
__
I believe that's because backgrounds on propagate to the viewport -
that's the root () element. Unless, that is, you have a background
specified for .
Try adding this to your pen's CSS:
html { background-color: white; }
--
Cordially,
David
__
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/
Re: [css-d] Background image on body appears to be in viewport or HTML
That did it, so is this reverse cascading :)?
On Sun, Feb 9, 2014 at 3:53 PM, David Hucklesby wrote:
> On 2/9/14, 12:11 PM, Chris Rockwell wrote:
>
>> Interesting Chris. I'v always styled the with margins,
>>> positioning, sometimes padding...etc and it always has an effect. But
>> have
>> you applied colors, images to that? This pen shows what I'm referring to
>> (and
>> I've never experienced because of my mark-up conventions):
>> http://codepen.io/anon/pen/fkyEF.
>>
>> Notice the border and padding honor the width, but not the color. I wonder
>> why...
>> __
>>
>
> I believe that's because backgrounds on propagate to the viewport -
> that's the root () element. Unless, that is, you have a background
> specified for .
>
> Try adding this to your pen's CSS:
>
> html { background-color: white; }
> --
> Cordially,
> David
>
>
> __
> 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/
Re: [css-d] Background image on body appears to be in viewport or HTML
On Sun, Feb 9, 2014 at 3:53 PM, David Hucklesby wrote: > I believe that's because backgrounds on propagate to the viewport - > that's the root () element. Unless, that is, you have a background > specified for . > Backgrounds on root elements are special :) http://www.w3.org/TR/css3-background/#special-backgrounds -- Jon Reece jon.re...@gmail.com __ 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/
Re: [css-d] Background image on body appears to be in viewport or HTML
> > > Backgrounds on root elements are special :) > > http://www.w3.org/TR/css3-background/#special-backgrounds Perfect - thanks for the link Jon! -- 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/
Re: [css-d] Background image on body appears to be in viewport or HTML
On 09/02/2014 20:53, David Hucklesby wrote:
On 2/9/14, 12:11 PM, Chris Rockwell wrote:
Interesting Chris. I'v always styled the with margins,
positioning, sometimes padding...etc and it always has an effect. But have
you applied colors, images to that? This pen shows what I'm referring to (and
I've never experienced because of my mark-up conventions):
http://codepen.io/anon/pen/fkyEF.
Notice the border and padding honor the width, but not the color. I wonder
why...
__
I believe that's because backgrounds on propagate to the viewport -
that's the root () element. Unless, that is, you have a background
specified for .
Try adding this to your pen's CSS:
html { background-color: white; }
YES ! It worked for me too. So that's the problem solved, thank you. Just leaves me wondering
why I've never come across that before.
Tim
--
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/
