Published Jun 30, 2021Updated Oct 14, 2023
Contribute to Docs

Shorthand way of expressing the various background properties of one or more element backgrounds in any order using a single declaration.


background: <value>;

where <value> can be any of the following:

  • Attachment value: scroll, fixed
  • Blend mode value: dark, light
  • Clip value: content-box, padding-box, border-box
  • Color value: rgba(255, 0, 255, 0.3)
  • Image value: url('cat.png')
  • Origin value: content-box, padding-box, border-box
  • Position value: top, 50% 50%
  • Repeat value: repeat, repeat-x, round
  • Size value: contain, cover

Example 1

Sets rebeccapurple as the background color:

body {
background: rebeccapurple;

This will display:

CSS Background Example 1

Example 2

Specifies the background-color, the background-image property to set the image to the background, background-repeat to specify the image to not be repeated, background-attachment to specify the image to be fixed and background-position to specify the image to be in center:

body {
background: blue url('whale.png') no-repeat fixed center;

This will display:

CSS Background Example 2

All contributors

Looking to contribute?

Learn CSS on Codecademy