How do I use the background shorthand property?
Author: Deron Eriksson
Description: This CSS tutorial describes the use of the background shorthand property.
Tutorial created using: Windows XP


The "background" shorthand property is a single property that can be used to enter values for the background-color, background-image, background-repeat, background-attachment, and background-position properties. It is a convenient shorthand method of entering multiple property values all under one shorthand property. The background property sets all of the aforementioned properties to their initial values and then sets values for them according to the declaration. The background property can be set to inherit.

The style-test.html file below demonstrates several examples of the use of the background property.

style-test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
<style type="text/css">
body { background-color: aqua; margin: 0; }
div.example { width: 200px; height: 100px; margin: 1em; }
div.one { background: lime; }
div.two { background: url("world.gif") gray; }
div.three { background: url("world.gif") fuchsia repeat-y; }
div.four { background: bottom url("world.gif") yellow no-repeat; }
</style>
</head>
<body>
<h2>Examples</h2>
<div class="example one">one</div>
<div class="example two">two</div>
<div class="example three">three</div>
<div class="example four">four</div>
</body>
</html>

The beautiful style-test.html page in IE7 is shown below.

background shorthand example