[css-d] Background image on body appears to be in viewport or HTML
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/
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 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
__
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:
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/
Re: [css-d] Background image on body appears to be in viewport or HTML
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/
Re: [css-d] Background image on body appears to be in viewport or HTML
Interesting Chris. I'v always styled the body 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:
body
div class=wrapper !-- -- style this --
/div
/body
On Sun, Feb 9, 2014 at 2:02 PM, Tim Dawson t...@ramasaig.com
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 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 [css-d@lists.css-discuss.org
mailto:css-d@lists.css-discuss.org]
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 [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 2/9/14, 12:11 PM, Chris Rockwell wrote:
Interesting Chris. I'v always styled the body 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 body propagate to the viewport -
that's the root (html) element. Unless, that is, you have a background
specified for html.
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 huckle...@gmail.com wrote:
On 2/9/14, 12:11 PM, Chris Rockwell wrote:
Interesting Chris. I'v always styled the body 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 body propagate to the viewport -
that's the root (html) element. Unless, that is, you have a background
specified for html.
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 huckle...@gmail.com wrote: I believe that's because backgrounds on body propagate to the viewport - that's the root (html) element. Unless, that is, you have a background specified for html. 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 body 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 body propagate to the viewport -
that's the root (html) element. Unless, that is, you have a background
specified for html.
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/
