Chapter 10. Backgrounds

In Chapter 9, you learned how CSS lists are styled. In this chapter, I explore the CSS background properties and see how these provide control over the presentation of the background. In this chapter, I discuss the following:

  • How to use the background-color property to set a background color

  • How to use the background-image property to specify a background image

  • How to use the background-repeat property to control background tiling

  • How to use the background-position property to control how the background is positioned

  • How to use the background-attachment property to control whether the background scrolls with the page or remains fixed in place with respect to the view port

  • How to use the background shorthand property to combine all the separate background properties into a single property

Backgrounds play a large role in CSS design and are often the bread and butter of the overall aesthetic presentation of a web page. This chapter begins the discussion of background properties by exploring the background-color property.

The background-color Property

The background-color property is used to specify a solid background color. The following table shows the possible values for the background-color property.




<color> | transparent


Initial value: transparent

The background-color property allows any of the color values supported by CSS, such as a color keyword, an RGB value, or a hexadecimal, or short hexadecimal value. It may also be given the

Get Beginning CSS: Cascading Style Sheets for Web Design, Second Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.