Using the background Shorthand Property
The background property sets all of the background values in a single declaration.
Here is the format referencing the individual properties:
background: <background-color> <background-position> <background-size> <background-repeat> <background-origin> <background-clip> <background-attachment> <background-image>
If you omit values, then the browser will use the defaults.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
border: 10px double black;
background: lightgray top right no-repeat border-box content-box local url(http://java2s.com/Book/HTML-CSSImages/star.png);
}
</style>
</head>
<body>
<p>
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</p>
</body>
</html>
This single property
background: lightgray top right no-repeat border-box content-box local url(background.png);
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(background.png);
Home
HTML CSS Book
CSS
HTML CSS Book
CSS
Background:
- Setting Element Backgrounds
- Setting the Background Color and Image
- Setting the Background Image Size
- Setting the Background Image Position
- Setting the Attachment for the Background
- Setting the Background Image Origin
- Using the background Shorthand Property
Related: