CSS background Property Reference

The CSS background shorthand sets multiple background properties in one declaration.

Updated 2026-08-07

Shorthand syntax

Use background to set an image, position, size, repeat behavior, attachment, origin, clipping area, and color. Omitted components reset to their initial values, so a shorthand declaration can overwrite earlier background-* declarations.

Write position before the optional slash and size after it. A background color may appear only in the final layer.

CSS

.hero {
  background: #eef url("hero.svg") center / cover no-repeat;
}

Multiple layers

Comma-separated layers are painted from first to last, so the first image is visually closest to the user. Only the last layer may include a color fallback.

CSS

.banner {
  background:
    linear-gradient(rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.35)),
    url("mountains.jpg") center / cover no-repeat,
    #263238;
}

Background longhands

Longhand	Purpose
background-color	Paints the fallback color.
background-image	Sets images or gradients.
background-position	Positions each image.
background-size	Sizes each image.
background-repeat	Controls tiling.
background-attachment	Controls scrolling behavior.
background-origin	Sets the positioning box.
background-clip	Limits the painted area.