Using the background Shorthand Property
Description
The background property sets all of the different background values in a single declaration.
Here is the format for the value of this property, referencing the individual properties:
background: <background-color>
<background-position>
<background-size>
<background-repeat>
<background-origin>
<background-clip>
<background-attachment>
<background-image>
It is a long declaration, but you can omit values. If you do, the browser will use the defaults.
Example
The following code uses the border Shorthand Property.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!-- w ww. j a v a 2 s .co m-->
border: 10px double black;
background: lightgray top right no-repeat border-box content-box local
url(http://www.java2s.com/style/download.png);
}
</style>
</head>
<body>
<p>This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
</p>
</body>
</html>
This single property is equivalent to the following set of individual properties:
background-color: lightgray;
background-position: top right;
background-repeat: no-repeat;
background-origin: border-box;
background-position: content-box;
background-attachment: local;
background-image: url(http://www.java2s.com/style/download.png);
Not all browsers support this property, at present.