Stylesheets - background color defined with a background-image

Author

background color defined with a background-image

Haines Brown

2006-11-05, 11:33 pm

I have situations in which I define the color attribute for an
element that is displayed against a background-image. For example, an
incipit:

#intro:first-letter {
margin: -0.05em 0.2em -0.2em 0.1em;
float: left;
color: #CC0000; background-image: url(bin/bk.png);
font-weight: bolder;
font-size: 220%;
}

If I don't define a background-color, I get a W3C validation warning:

Line : 98 (Level : 1) You have no background-color with your color :
#intro:first-letter

Fair enough, but if I add background-color: transparent; or if I put
background-image: url(); I get the same error.

Why is "transparent" causing a warning?

--

Haines Brown, KB1GRM
Dialectical Materialist

Els

2006-11-05, 11:33 pm

Haines Brown wrote:

> color: #CC0000; background-image: url(bin/bk.png);

> If I don't define a background-color, I get a W3C validation warning:

> Fair enough, but if I add background-color: transparent; or if I put
> background-image: url(); I get the same error.
>
> Why is "transparent" causing a warning?

Because it isn't a colour. When you are sure that transparent is the
best background, don't worry about the warning. But in this particular
case, I'd consider the possibility of a background-image not loading.
Is the background behind the text then still contrasting with the font
colour?

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Spartanicus

2006-11-05, 11:33 pm

Haines Brown <brownh@teufel.hartford-hwp.com> wrote:

>If I don't define a background-color, I get a W3C validation warning:
>
> Line : 98 (Level : 1) You have no background-color with your color :
> #intro:first-letter
>
>Fair enough, but if I add background-color: transparent; or if I put
>background-image: url(); I get the same error.

No surprise, background-color defaults to transparent if you omit it.

>Why is "transparent" causing a warning?

It is just that: a warning (as opposed to an error). It is there to warn
you that without a non transparent background colour defined on the
element itself your text could conceivably not be visible, depending on
the colour of what lies beneath.

--
Spartanicus