• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 14. Background Properties > background Property

14.6. background Property

The background property is a “shortcut” property, allowing Web authors quick access to all of the values contained in the rest of the background family of properties, namely background-color, background-image, background-repeat, backgroundattachment and background-position. It works in much the same manner as the font property in providing quick access to all of the values contained in the font family. It should also be noted that when the background-related properties that appear in the CSS3 specification begin to be adopted within popular browsers, they will also be applicable to this shortcut property.

All of the values associated with background property have already been discussed in detail with each of the other background family properties. background is a handy shortcut for setting all of the values you need quickly. The following two code samples are equivalent to each other, and are depicted in Figure 14-11:

Listing 14.8. background Put to Use as a "Shortcut" Property

<html>
<head>
<title>background Example</title>
<style>
body {background: silver url(rufus_s-202.jpg) repeat-y fixed top
right; font-size: large;  margin-right: 55%}
</style>
</head>
This page presents a coin of Senator Rufus, who issued coins
during the Republican period of the ancient Roman state (prior to
the advent of the first Roman emperor Augustus).
<p>
The head of Sol the sun god is depicted on one side, and the other
side shows him in a chariot being pulled across the sky by four
horses.
</p>
</body>
</html>

Figure 14-11. The background property “in action,” as seen with Internet Explorer 6.0.


Listing 14.9. Various Background Properties the Equivalent of the Previous Background Code Example

<html>
<head>
<title>background Example 2 (Long form)</title>
<style>
body {background: silver; background-image: url(rufus_s-202.jpg); 
background-repeat: repeat-y; background-attachment: fixed; 
background-position: top right; font-size: large;  margin-right: 55%}
</style>
</head>
<body>
This page presents a coin of Senator Rufus, who issued coins
during the Republican period of the ancient Roman state (prior to
the advent of the first Roman emperor Augustus).
<p>
The head of Sol the sun god is depicted on one side, and the other
side shows him in a chariot being pulled across the sky by four 
horses.
</p>
</body>
</html>

As you can easily see, the first code sample using only the background property is much more concise.

Unlike the somewhat finicky font shortcut property, it is possible to rearrange the ordering of the various values for background without interfering with the presentation of the elements displayed on screen.

Browser Compatibility

Given the fact that this property is a shortcut property for all of the other properties in the background family, it necessarily inherits all of the functionality (or lack thereof) supported by a particular browser.

  • Internet Explorer 3.0: Unsafe.

  • Internet Explorer 4.0: Partial.

  • Internet Explorer 4.0 – 4.5 (Mac): Safe.

  • Internet Explorer 5.0: Safe

  • Internet Explorer 5.1 – 5.2 (Mac): Safe.

  • Internet Explorer 5.5: Safe

  • Internet Explorer 6.0: Safe

  • Netscape Navigator 4.0 – 4.79: Partial. Only supports the values associated with background-image fully.

  • Netscape Navigator 4.0 (Mac & UNIX): Partial. Same as above.

  • Netscape Navigator 6.0: Safe.

  • Netscape Navigator 7.0: Safe.

  • Mozilla 1.0: Safe.

  • Opera 3.6: Safe.

  • Opera 5.0: Safe.

  • Opera 6.0: Safe.

  • Konqueror: Safe.

Internet Explorer has fully implemented the background property since version 4.0.

Netscape Navigator 4.x only rates a Partial as it only supports the values associated with background-image fully. Netscape Navigator 6.0 (and Mozilla 1.0) on up support all of the attributes for the background property.

This property has been fully implemented since version 3.6 of Opera.

It is also fully supported within Konqueror.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint