CSS background - Shorthand property
A shorthand property packs several declarations into one, and background does this for all the background properties, which keeps the code shorter.
It covers background-color, background-image, background-position, background-size, background-repeat, background-attachment, background-origin, and background-clip.
Any value you omit falls back to its default.
Example
Color, image, repeat, and position all sit in a single shorthand declaration here.
Prompt
An HTML page that sets several background properties at once using the background shorthand.
In an internal
<style> block, set the body background using a single shorthand declaration: background: #ffffff url("img_tree.png") no-repeat right top. Add a heading and a paragraph.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
</style>
</head>
<body>
<h1>The background Shorthand Property</h1>
<p>All the background properties are set in one declaration.</p>
</body>
</html>
Long form
Written as separate properties, the same background takes all of these lines, which the shorthand replaces.
styles.css
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
All CSS Background Properties
Quick reference for the background properties:
background— all the background properties in a single declaration.background-attachment— whether a background image scrolls with the page or stays fixed.background-clip— the area the background is painted in.background-color— the color behind an element.background-image— the image used as an element's background.background-origin— where the background image is positioned.background-position— where a background image starts.background-repeat— how a background image repeats.background-size— how big the background image is.