codeThe CSS background property sets all the background related properties at the same time. It can be used to set, position and resize background images and/or set a background color. The background color appears behind any background images. Several background images/gradients may be listed, each with its own set of repeat, position, size and clip rules. Values not given to background are reset to their initial value (eg. images set by other properties are removed). This is why the longhand properties are prefered when modifying the background rather than specifying it completely.
background: url('imageUrl'), #f0f0f0; /* color behind image */
background: linear-gradient(to right, #d5d5d5, white);
background: url('imageUrl') 20% 80% / 50px repeat-y; /* h-pos v-pos / size repeat */
background: url('imageUrl') content-box repeat-x; /* paint the content and repeat */
background:
url('imageFrontUrl') repeat-x content-box,
url('imageBehindUrl'),
rgb(230,120,60); /* comma-separate multiple images */
A image has the following syntax:
url|gradient position / size repeat attachment origin clipEach value has its own longhand property: background-image, background-position, background-size, background-repeat, background-attachment, background-origin and background-clip.
Browser Support: Full
An Example
background comes in handy when setting several background images because it saves a bit of CSS code. However, background will literally reset all the background properties. It doesn't allow preserving a previously set value. Shorthands are okay most of the time but use longhands for overriding.
The example deals with five background layers. The orange background color is behind, visible through the padding area. The leaves layer covers the background color in the content area only, due to content-box. Then comes the dark gradient followed by a white-to-orange 35px radial gradient. The monkey is finally centered on top of everything.
position, repeat and clip
CSS gives separate control over the display of each background layer.
- position (background-position) sets the horizontal and vertical position of the first instance (or only instance, depending on repeat) of the background image. It is usually given as two percentages relative to the parent: horizontal and vertical.
- repeat(background-repeat) controls whether the image is repeated vertically (repeat-y), horizontally(repeat-x), both (repeat) or not repeated (no-repeat).
- clip (background-clip) is used to limit the painting area to the content (content-box), or padding and content areas (padding-box). The default includes behind the border (border-box).
background vs Longhand Properties
CSS shorthands are great space and time savers but it's important to know exactly how they behave. Values not provided to a shorthand are reset to their initial states instead of being preserved. The initial state is the default state of a property. It is always the same. Inherited or previously set values are ignored. For example:
The background image is removed because it defaults to none. It doesn't happen if background is changed for background-color.
The background area
The background paints the content, padding and border areas by default. The clip value (background-clip property) is used to change this area and prevent the padding from being painted. In the following example the gradient paints the content area only, while the image paints both padding and border.