background-color: #777777 not working in CSS

#11

In our last episode,
<16NPc.965$rX6.644@trndny02>,
the lovely and talented Arondelle
broadcast on comp.infosystems.www.authoring.stylesheets:

Quote:

Can't have it both ways, that is, you can't define two instances of
BODY. Only one BODY to a page.

But of course you can have as many as you please. You can't have
two BODY elements in an HTML document, but that is nothing to do
with css. However, you have to understand the cascade, which
entails that when you have

BODY { ... }

BODY.something { ... }

BODY.something will inherit everything from BODY.

Quote:

If you want a plain background, then you have to ditch the background
image. While you're at it, ditch one of the BODY style declarations.

Not necessary. All you have to do is reset the backgrond-image to
none.

--
Lars Eighner -finger for geek code- eighner (AT) io (DOT) com http://www.io.com/~eighner/
If it wasn't for muscle spasms, I wouldn't get any exercise at all.

#12

Michael Wilcox wrote:

Quote:

The method you are using is highly redundant. Why would the body tag
need a class and a general statement?

In the case that the stylesheet is being shared amongst multiple HTML
documents, and this body needs a different style to the others.

--
Mark.
http://tranchant.plus.com/

#13

kyu_alpha (AT) lycos (DOT) net (Kevin Yu) wrote in
news:ceo3f6$l3j$01$1 (AT) news (DOT) t-online.com:

Quote:

When I declare on HTML page

LINK href="mycss.css" type="text/css" rel=stylesheet /
...
BODY class=myclass

in mycss.css

BODY { FONT-WEIGHT: bold; FONT-SIZE: 12px; FONT-FAMILY:
Arial, Geneva; background-image: url(images/back.jpg); }

BODY.myclass { FONT-WEIGHT: bold; FONT-SIZE: 15px; FONT-FAMILY:
Arial, Geneva; background-color: #777777; } ...

the background-color in the second declaration is NOT taken but the
"normal" background image back.jpg is used for the background.

How do I get #777777 as background-color ?

By default, when an element has background-image and background-color
defined, it will display the background-image on top of the background-
color. So set the background-image to 'none':

BODY.myclass { FONT-WEIGHT: bold; FONT-SIZE: 15px; FONT-FAMILY:
Arial, Geneva; background-color: #777777; background-image: none; }

--
Accessible web designs go easily unnoticed;
the others are remembered and avoided forever.

#14

In article <ceo3f6$l3j$01$1 (AT) news (DOT) t-online.com>,
kyu_alpha (AT) lycos (DOT) net (Kevin Yu) wrote:

Quote:

When I declare on HTML page

LINK href="mycss.css" type="text/css" rel=stylesheet /

Quote your attributes.

Quote:

BODY class=myclass

Quote your attributes. XHTML should be written in lowercase, not
uppercase. Soon somebody here will be responding and asking you why you
use XHTML in the first place and not HTML.

'myclass' is a bad name for a class. Make it descriptive for it's
purpose, like 'gallery' when the page is a gallery of photos or
'contact' when it contains contact information. How will you know what
this class is for in six months when you have to alter something?

Quote:

in mycss.css

BODY { FONT-WEIGHT: bold; FONT-SIZE: 12px; FONT-FAMILY: Arial,
Geneva; background-image: url(images/back.jpg); }

When your markup is written in lowercase, make your CSS selectors also
be lowercase.

Don't specify fonts in pixels. Use percentages, ems or keywords instead.
Font size in pixels does not scale in IE when the visitor changes the
size of the displayed text.

For font-family, also specify a generic family. In this case, you
probably want sans-serif:

font-family: Arial, Geneva, sans-serif;

Quote:

BODY.myclass { FONT-WEIGHT: bold; FONT-SIZE: 15px; FONT-FAMILY: Arial,
Geneva; background-color: #777777; }

Don't forget to specify a foreground color as well, or else somebody's
browser's default text color or user style sheet may come in and make
your page unreadable. You have no certainty that my browser's default
foreground color is purple. Oh, you were counting on black?

Quote:

the background-color in the second declaration is NOT taken but the "normal"
background image back.jpg is used for the background.

How do I get #777777 as background-color ?

Maybe the image is covering the background color?

Try some of the above suggestions to fix your markup. Does the problem
persist? Do you have a URL perhaps? That is easier for us. There may be
something you didn't notice and we don't know until we see the offending
page.

--
Kris
<kristiaan (AT) xs4all (DOT) netherlands> (nl)

#15

On Tue, 3 Aug 2004 15:20:38 +0200, kyu_alpha (AT) lycos (DOT) net (Kevin Yu) wrote:

Quote:

BODY { FONT-WEIGHT: bold; FONT-SIZE: 12px; FONT-FAMILY: Arial, Geneva; background-image: url(images/back.jpg); }

BODY.myclass { FONT-WEIGHT: bold; FONT-SIZE: 15px; FONT-FAMILY: Arial, Geneva; background-color: #777777; }
...

the background-color in the second declaration is NOT taken but the "normal" background image back.jpg is used for the background.

How do I get #777777 as background-color ?

{ background-image: none; } should do it.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

#16

For a body tag of the myclass class, both the background-image
declaration and the background-color declaration are applied to it.
The background-image declaration takes precedence. You need to
explicitly set background-image: none in the body.myclass rule.

http://www.w3.org/TR/CSS2/colors.html#background-properties

kyu_alpha (AT) lycos (DOT) net (Kevin Yu) wrote in message news:<ceo3f6$l3j$01$1 (AT) news (DOT) t-online.com>...

Quote:

When I declare on HTML page

LINK href="mycss.css" type="text/css" rel=stylesheet /
...
BODY class=myclass

in mycss.css

BODY { FONT-WEIGHT: bold; FONT-SIZE: 12px; FONT-FAMILY: Arial, Geneva; background-image: url(images/back.jpg); }

BODY.myclass { FONT-WEIGHT: bold; FONT-SIZE: 15px; FONT-FAMILY: Arial, Geneva; background-color: #777777; }
...

the background-color in the second declaration is NOT taken but the "normal" background image back.jpg is used for the background.

How do I get #777777 as background-color ?

#17

"Lars Eighner" <eighner (AT) io (DOT) com> wrote

Quote:

In our last episode,
ceo3f6$l3j$01$1 (AT) news (DOT) t-online.com>,
the lovely and talented Kevin Yu
broadcast on comp.infosystems.www.authoring.html:

When I declare on HTML page

LINK href="mycss.css" type="text/css" rel=stylesheet /
...
BODY class=myclass

in mycss.css

BODY { FONT-WEIGHT: bold; FONT-SIZE: 12px; FONT-FAMILY: Arial,
Geneva; background-image: url(images/back.jpg); }

BODY.myclass { FONT-WEIGHT: bold; FONT-SIZE: 15px; FONT-FAMILY: Arial,
Geneva; background-color: #777777; }
...

the background-color in the second declaration is NOT taken but the
"normal" background image back.jpg is used for the background.

How do I get #777777 as background-color ?

I could be wrong, but it appears to me that BODY.myclass is
inheriting background-image from BODY so that BODY.myclass
gets background-color plus background-image, and of course
the background-image covers the color.

Though this looks like inheritance, there is no inheritance in CSS. The BODY
selector and the BODY.myclass selector both match the BODY tag, so both
apply following the usual cascade rules, but the fact that both selectors
involve BODY is not involved in this. The background-related properties
would be applied in the same way if the page had:

body { FONT-WEIGHT: bold; FONT-SIZE: 12px; FONT-FAMILY: Arial, Geneva;
background-image: url(images/back.jpg); }
..myclass { FONT-WEIGHT: bold; FONT-SIZE: 15px; FONT-FAMILY: Arial,
Geneva; background-color: #777777; }
....
<body class="myclass">

or

..xxx { FONT-WEIGHT: bold; FONT-SIZE: 12px; FONT-FAMILY: Arial, Geneva;
background-image: url(images/back.jpg); }
..yyy { FONT-WEIGHT: bold; FONT-SIZE: 15px; FONT-FAMILY: Arial, Geneva;
background-color: #777777; }
....
<body class="xxx yyy">

#18

"Harlan Messinger" <h.messinger (AT) comcast (DOT) net> wrote:

Quote:

I could be wrong, but it appears to me that BODY.myclass is
inheriting background-image from BODY so that BODY.myclass
gets background-color plus background-image, and of course the
background-image covers the color.

Though this looks like inheritance, there is no inheritance in CSS.

There is. But probably you mean that there is no inheritance involved in
_this_ phenomenon, and that's correct:

Quote:

The BODY selector and the BODY.myclass selector both match the BODY
tag, so both apply following the usual cascade rules,

Indeed. But children of BODY may, by certain rules, inherit properties
from BODY, and so on.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

#19

"Jukka K. Korpela" <jkorpela (AT) cs (DOT) tut.fi> wrote

Quote:

"Harlan Messinger" <h.messinger (AT) comcast (DOT) net> wrote:

I could be wrong, but it appears to me that BODY.myclass is
inheriting background-image from BODY so that BODY.myclass
gets background-color plus background-image, and of course the
background-image covers the color.

Though this looks like inheritance, there is no inheritance in CSS.

There is. But probably you mean that there is no inheritance involved in
_this_ phenomenon, and that's correct:

The BODY selector and the BODY.myclass selector both match the BODY
tag, so both apply following the usual cascade rules,

Indeed. But children of BODY may, by certain rules, inherit properties
from BODY, and so on.

Yes, sorry about the imprecision. I should have said there's no inheritance
among CSS rule sets.

#20

Kevin Yu wrote:

Quote:

When I declare on HTML page

LINK href="mycss.css" type="text/css" rel=stylesheet /
...
BODY class=myclass

in mycss.css

BODY { FONT-WEIGHT: bold; FONT-SIZE: 12px;
FONT-FAMILY: Arial, Geneva; background-image:
url(images/back.jpg); }

BODY.myclass { FONT-WEIGHT: bold; FONT-SIZE: 15px;
FONT-FAMILY: Arial, Geneva; background-color: #777777; }
...

the background-color in the second declaration is NOT taken
but the "normal" background image back.jpg is used for the
background.

How do I get #777777 as background-color ?

I'm not sure how you can have two body's here, one with and
one without a class, maybe on different pages?
Anyway, to make the background-image not apply, use
background:#777777; instead of background-color:#777777;. This
way you set the colour to #777777 and all the other background
properties to default, and the image will not be applied.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -