Skip to main content
Home / CSS Almanac / Properties / B / background

The background property in CSS allows you to control the background of any element (what paints underneath the content in that element). It is a shorthand property, which means that it allows you to write what would be multiple CSS properties in one. Like this:

body {
     url(sweettexture.jpg)    /* image */
     top center / 200px 200px /* position / size */
     no-repeat                /* repeat */
     fixed                    /* attachment */
     padding-box              /* origin */
     content-box              /* clip */
     red;                     /* color */

background is made up of eight other properties:

You can use any combination of these properties that you like, in almost any order (although the order recommended in the spec is above). There is a gotcha though: anything you don’t specify in the background property is automatically set to its default. So if you do something like this:

body {
  background-color: red;
  background: url(sweettexture.jpg);

The background will be transparent, instead of red. The fix is easy though: just define background-color after background, or just use the shorthand (e.g. background: url(...) red;)

Multiple Backgrounds

CSS3 added support for multiple backgrounds, which layer over the top of each other. Any property related to backgrounds can take a comma separated list, like this:

body {
  background: url(sweettexture.jpg), url(texture2.jpg) black;
  background-repeat: repeat-x, no-repeat;

Each value in the comma separated list corresponds to a layer: the first value is the top layer, the second value is the second layer, and the background color is always the last layer.


See the Pen emBzRd by Timothy Miller (@tjacobdesign) on CodePen.

Browser Support

Support varies among the different specific properties, and each corresponding article in the Almanac has unique browser support notes. Basic single-color backgrounds and single images work everywhere though, and anything that isn’t supported just falls back to the next best thing, whether that’s an image or a color.

Chrome Safari Firefox Opera IE Android iOS
Works Works Works Works Works Works Works
Jump to Almanac Navigation