Using Background Property Shorthand

As you can see from the examples above, to really take control of background images you need to harness the power of several different background properties. But typing out background-image, background-attachment, and so on again and again can really take its toll on your hands. But there's an easier way—the background shorthand property.

You can actually bundle all the background properties (including the background-color property you learned about last chapter) into a single line of streamlined CSS. Simply type background followed by the values for background-color, background-image, background-attachment, and background-position. The following style sets the background to white, and adds a non-repeating fixed background image smack dab in the middle of the page:

Get CSS: The Missing Manual 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.