A background is a stack of layers: background-image takes a comma-separated list painted top-first over one background-color, and each longhand below takes one value per layer:
background-position: right 10px bottom 10px, 30% 50%; negative offsets select one icon from a sprite sheet.
background-size: cover fills the box (cropping), contain fits the whole image, or 50px auto.
background-repeat: repeat, no-repeat, repeat-x, space (whole tiles, gaps between) or round (whole tiles, rescaled).
background-attachment: scroll, fixed (pinned to the viewport; Safari 10 on iOS ignores it) or local (scrolls with the element's content).
background-origin (default padding-box) is the box 0 0 refers to; background-clip (default border-box) is where painting stops, and text paints only behind the glyphs.
background-blend-mode blends the layers (Imaging).
The shorthand writes a layer as image position / size repeat attachment origin clip, with the color in the last layer only. Omitted parts reset, so a later background: red wipes out an earlier background-image.
.hero {
background:
url("logo.svg") right 1rem bottom 1rem / 80px no-repeat, /* top layer */
linear-gradient(#0008, #0000 60%), /* darkening scrim */
url("hero.avif") center / cover no-repeat #37474f; /* photo + fallback color */
}The scrim keeps white headlines readable over any photo; the color shows while the photo loads. The gallery in Gradients in Depth renders layered tiles, background-clip: text and a clipped gradient border.
Use <img> for meaningful images: backgrounds have no alt text and usually do not print.