Properties That Don t Inherit | Cascading Style Sheets: Designing for the Web (3rd Edition)

Properties That Don't Inherit

As a general rule, properties in CSS inherit from parent to child elements as described in the previous examples. Some properties, however, don't inherit and there is always a good reason why. We use the background property (which is described in Chapter 10, "Colors") as an example of a property that doesn't inherit.

Say you want to set a background image for a page. This is a common effect on the Web. In CSS, you can write the following:

 <html>   <title>Bach's home page</title>   <style TYPE="text/css">     body {       background: url(texture.gif) white;       color: black;     }   </style>   <body>     <h1>Bach's <em>home</em> page</h1>     <p>Johann Sebastian Bach was a prolific       composer.   </body> </html>

The background property has a URL (texture.gif) that points to a background image as value. When the image loads, the canvas looks like Figure 2.9.

Figure 2.9. Sample document with a background image.

Figure 2.9 contains some noteworthy items:

The background image covers the surface like a wallpaper. Also, the backgrounds of the H1 and P elements have been covered. This is not because of inheritance, but because of the fact that unless otherwise set, all backgrounds are transparent. So, because we haven't set the backgrounds of the H1 or P elements to something else, the parent element, BODY, shines through.
In addition to the URL of the image, a color (white) has also been specified as the background. In case the image can't be found, you see the color instead.
The color of the BODY element has been set to black. To ensure contrast between the text and the background, it is a good habit to always set a color when the background property is set.

So, exactly why doesn't the background property inherit? Visually, the effect of transparency is similar to inheritance: It looks like all elements have the same backgrounds. There are two reasons: First, transparent backgrounds are faster to display (there is nothing to display!) than other backgrounds. Second, because background images are aligned relative to the element to which they belong, you would otherwise not always end up with a smooth background surface.