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.

Property

Value

background-color

<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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial