The background shorthand sets all background properties in one declaration: color, image(s), position, size (after /), repeat, attachment, and origin/clip (reference box). Missing values reset to their longhand initial. The shorthand always resets all longhand sub-properties even if not explicitly given..card {
background: #f5f5f5 url('logo.png') no-repeat center / contain;
}.hero {
background:
linear-gradient(rgb(0 0 0 / 0.4), transparent) center / cover no-repeat,
url('photo.jpg') top / cover no-repeat,
navy;
}min:0max:9999step:1units:% | px | em | rem | vw | vh | vmin | vmax | pttransparentTransparent background color.currentColorCurrent color property value.noneNo background image for this layer.leftPosition at left edge.rightPosition at right edge.topPosition at top edge.bottomPosition at bottom edge.centerCentered.autoImage's intrinsic size (after /).coverSize covering the whole area (after /).containSize fully contained within area (after /).repeatTile the background image.repeat-xTile horizontally only.repeat-yTile vertically only.spaceTile with even gap distribution.roundTile rescaled to fit whole tiles.no-repeatNo tiling.scrollImage scrolls with the box.fixedImage fixed relative to viewport.localImage scrolls with box contents.border-boxReference box: border edge.padding-boxReference box: padding edge.content-boxReference box: content edge.rgb()RGB color function.hsl()HSL color function.hwb()HWB color function.lab()CIE Lab color function.lch()CIE LCH color function.oklab()Oklab color function.oklch()Oklch color function.color()Generic color function for custom color spaces.light-dark()Selects between two color values per color-scheme.url()Image by URL.linear-gradient()Linear color gradient along an axis.radial-gradient()Radial color gradient around a center.conic-gradient()Conic color gradient (rotating around a point).repeating-linear-gradient()Repeating linear gradient.repeating-radial-gradient()Repeating radial gradient.repeating-conic-gradient()Repeating conic gradient.image-set()Selects an image by resolution/format.cross-fade()Cross-fades two images by a percentage.CSS Backgrounds Module Level 4First Public Working Draft<color> <image> <length-percentage>W3CMDNCSSShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationvalue typessourcesvisual demonstrationpreviousnext
