CSS: The Definitive Guide, 3rd Edition (39 page)

Figure 9-7. Different colors for different elements

background-color

Figure 9-8. Backgrounds and padding

The potential combination of author and reader styles is the reason why a CSS
validator will generate warnings such as, "You have no
background-color
with your
color
." It's trying to remind you that author-user color interaction
can occur, and your rule has not accounted for this possibility. Warnings do not
mean your styles are invalid: only errors prevent validation.

So, setting a background color is a pretty simple thing—except for one small
warning: Navigator 4 gets the placement of background colors completely wrong.
Instead of applying the background color to the entire content box and padding,
the color appears only behind the text itself, as shown in
Figure 9-9
.

Figure 9-9. Navigator 4.x's incorrect behavior

Let me reiterate:
this behavior is totally wrong
. To
counteract it, you must set a border on the element, which you can then set to the
same color as the background color of your document:

body {background: silver;}
p {background-color: gray; padding: 0.1px; border: 1px solid silver;}

Note that you must set a
border-style
for
this technique to work. It doesn't matter whether you use that specific property
or simply a value of the
border
property.

Of course, by doing this, you're setting a border on the element, and that
border will show up in other user agents as well. To top things off, Navigator
doesn't handle padding very well, so the previous example results in a small
amount of blank space between the content box and the borders. Thankfully, newer
browsers don't suffer from such problems.

Simply by
combining
color
and
background-color
, you can create some useful
effects:

h1 {color: white; background-color: rgb(20%,20%,20%);
font-family: Arial, sans-serif;}

This
example is illustrated in
Figure
9-10
.

Figure 9-10. A nifty effect for H1 elements

Of course, there are as many color combinations as there are colors,
but I can't show all of them here—being stuck in grayscale as we are. Still, I'll
try to give you some idea of what you can do.

This style sheet is a
little more complicated, as illustrated by
Figure
9-11
:

body {color: black; background-color: white;}
h1, h2 {color: yellow; background-color: rgb(0,51,0);}
p {color: #555;}
a:link {color: black; background-color: silver;}
a:visited {color: gray; background-color: white;}

Figure 9-11. The results of a more complicated style sheet

This is just the tiniest beginning of what's possible, of course. By
all means, try some examples of your own!

To get an image
into the background in the first place, use the property
background-image
.

The default value of
none
means
about what you'd expect: no image is placed in the background. If you want a
background image, you must give this property a URL
value:

body {background-image: url(bg23.gif);}

Due
to the default values of other background properties, this will tile the image
bg23.gif
in the document's background, as shown in
Figure 9-12
. As you'll discover shortly,
though, tiling isn't the only option.

Figure 9-12. Applying a background image in CSS

You can apply a background image to any element, block-level or inline.
Most backgrounds are applied to
body
elements,
of course, but there's no need to stop
there:

p.starry {background-image: url(http://www.site.web/pix/stars.gif);
color: white;}
a.grid {background-image: url(smallgrid.gif);}
It's the end of autumn, which means the stars will be
brighter than ever!  Join us for
a fabulous evening of planets, stars, nebulae, and more...

As
you can see in
Figure 9-13
, you've
applied a background to a single paragraph and no other part of the document. You
can customize even further, such as placing background images on inline elements
like hyperlinks, also depicted in
Figure
9-13
. Of course, if you want to be able to see the tiling pattern, the
image will probably need to be pretty small. After all, individual letters aren't
that large!

Figure 9-13. Applying background images to block and inline elements

There are a number of ways to employ specific background images. You
might place an image in the background of
strong
elements to make them stand out more. You could fill in the
background of headings with a wavy pattern or with little dots. You can even fill
in the cells of tables with patterns to distinguish them from the rest of the
page, as shown in
Figure
9-14
:

td.nav {background-image: url(darkgrid.gif);}

Figure 9-14. Setting a background image for a table cell

You could even, in theory, apply images to the background of replaced
elements such as
textarea
s and
select
lists, although not every user agent is good
at handling that sort of thing.

As with
background-color
,
background-image
is not inherited—in fact, none of the background
properties are inherited. Remember also that specifying the URL of a background
image falls under the usual restrictions and caveats for
url
values: a relative URL should be interpreted with respect to the
style sheet, but Navigator 4.x doesn't do this correctly, so absolute URLs may be
a better answer.

Earlier, I specifically noted that backgrounds are not
inherited. Background images demonstrate why inherited backgrounds would be a bad
thing. Imagine a situation where backgrounds were inherited, and you applied a
background image to the
body
. That image would
be used for the background of every element in the document, with each element
doing its own tiling, as shown in
Figure
9-15
.

Figure 9-15. What inherited backgrounds would do to layout

Note how the pattern restarted at the top left of every element, including the
links. This isn't what most authors would want, so this is why background
properties are not inherited. If you
do
want this particular
effect for some reason, you can create it with a rule like this:

* {background-image: url(yinyang.gif);}

Alternatively, you could use the value
inherit
like this:

body {background-image: url(yinyang.gif);}
* {background-image: inherit;}

Images are laid on top of whatever background
color you specify. If you're completely tiling GIF, JPEG, or other opaque image
types, this fact doesn't really make a difference, since a fully tiled image will
fill up the document background, leaving nowhere for the color to "peek through,"
so to speak. However, image formats with an alpha channel, such as PNG, can be
partially or wholly transparent, and this will cause the image to be combined with
the background color. In addition, if the image fails to load for some reason, the
user agent will use the specified background color in place of the image. Consider
how the "starry paragraph" example would look if the background image failed to
load, as in
Figure 9-16
.

Figure 9-16. The consequences of a missing background image

Figure 9-16
demonstrates why it's
always a good idea to specify a background color when using a background image, so
that you'll at least get a legible
result:

p.starry {background-image: url(http://www.site.web/pix/stars.gif);
background-color: black; color: white;}
a.grid {background-image: url(smallgrid.gif);}
It's the end of autumn, which means the stars will be
brighter than ever!  Join us for
a fabulous evening of planets, stars, nebulae, and more...

This
will fill in a flat black background if the "starry" image can't be rendered for
some reason. Besides, if you don't want the image to fully tile across the
background of the document, you'll need a color to cover the parts that the image
doesn't. Speaking of which . . . .