background-color: #777777 not working in CSS

#1

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 ?

Kevin

#2

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 images are painted on top of the background color. You may
declare
background-image none
for BODY.myclass
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

#3

kyu_alpha (AT) lycos (DOT) net (Kevin Yu) wrote:

Quote:

BODY class=myclass

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 ?

It already is.
You've set both a background-color and a brackground-image. The
background-color will be used when the image doesn't load or in any
parts of the page where the image doesn't show (i.e. if you prevent
tiling).

To eliminate the background-image from the second style change it to
body.myclass {background-image: none; background-color: #777777;}

And setting font sizes in pixels is a really bad idea.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>

#4

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 ?

background-image and background-color are independent properties. Your
"myclass" body inherits both properties, and the image is displayed on
top of the color. You want:

body.myclass { ... ; background-image: none; background-color: #777; }

....where #777 is CSS colour shorthand for #777777 [1].

As you seem to be writing in XHTML (<link ... />), you need to use
lower-case element names [2] and you must enclose all element attributes
in quotes (class="myclass") [3].

[1] http://www.w3.org/TR/REC-CSS1#color-units
[2] http://www.w3.org/TR/xhtml1/#h-4.2
[3] http://www.w3.org/TR/xhtml1/#h-4.4

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

#5

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.

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

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.

Arondelle
--
================================================== =========
To email me, empty the pond with a net

#6

Arondelle <aron.delle3 (AT) verizon (DOT) pond> wrote:

Quote:

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

But you can have many different pages on a site, all using the same
linked stylesheet, so having some pages with different body styles is
perfectly acceptable. How would you style those pages? With a separate
stylesheet? With inline styles? Why would you prefer those over using
a class?

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>

#7

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

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 ?

Kevin

try background-image:none; in second declaration.Also you don't need to
repeat the font-weight or font-family. They will inherit.

--

stephen

#8

Kevin Yu <kyu_alpha (AT) lycos (DOT) net> wrote:

Quote:

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

You can have both background color and background image at the same
time. So defining a background color will not remove or overwrite the
background image. And because the background image is drawn over the
background color, you won't see the background color in your example
(only if the background image has transparent parts, you would see the
background color shining through). To remove the background image, you
have to explicitely define no background image for "BODY.myclass".

--
Alexander

#9

On 3/8/04 2:20 pm, 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 ?

Kevin

Add "background-image: none;" to the second rule.
--
Philip Ronan
phil.ronanzzz (AT) virgin (DOT) net
(Please remove the "z"s if replying by email)

#10

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:

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 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. I think using
background: to reset all of the background attributes will
solve this.

--
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.