CSS background Property

The 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: images?, color?
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 */
    url('imageFrontUrl') repeat-x content-box,
    rgb(230,120,60);                                     /* comma-separate multiple images */

A image has the following syntax:

url|gradient position / size repeat attachment origin clip
Each 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.

div.container {
padding: 15px; background: url('monkey.png') no-repeat center, radial-gradient(circle 35px, white, orange 80%, transparent), linear-gradient(to bottom, transparent, black), url('leaves.jpg') content-box, orange;

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:

div {
background-image: url('autumn.jpg');
} div.solid {
background: #B34011;

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.

div.container {
padding: 30px; background: linear-gradient(to bottom, #464646, #262626) content-box, url('maple.jpg');
background-clip is great!

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>