Background Colors and Images


  • 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 is used to specify a solid background color. The following table shows the possible values for the background-color property.

background-color <color> | transparentInitial value: transparent

The background-color property allows any of the color values supported by CSS that I covered in chapter 2, such as a color keyword, an RGB value, or a hexadecimal, or short hexadecimal value. It may also be given the transparent keyword, which indicates that no color should be used. This is straightforward, so let's Try It Out right away. The following exercise ...

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

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