Syntax
background: [color] [image] [position] / [size] [repeat] [attachment] [origin] [clip];Sub-Properties
| Property | Values | Default |
|---|---|---|
| background-color | any colour value | transparent |
| background-image | url(), gradient, none | none |
| background-position | top left center 50% 20px | 0% 0% |
| background-size | cover contain auto px % | auto |
| background-repeat | repeat no-repeat repeat-x repeat-y round space | repeat |
| background-attachment | scroll fixed local | scroll |
| background-origin | border-box padding-box content-box | padding-box |
| background-clip | border-box padding-box content-box text | border-box |
Common Examples
/* Solid colour */
background: #6366f1;
background-color: #6366f1;
/* Image, cover, centered */
background: url('hero.jpg') center / cover no-repeat;
/* Full shorthand */
background: #060b14 url('texture.png') center / 200px repeat fixed;Gradient Backgrounds
/* Linear gradient */
background: linear-gradient(135deg, #6366f1, #8b5cf6);
/* Radial gradient */
background: radial-gradient(ellipse at center, #1a1a2e, #060b14);
/* Conic gradient */
background: conic-gradient(from 90deg, #6366f1, #ec4899, #6366f1);
/* Gradient with stop positions */
background: linear-gradient(to right, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);Multiple Backgrounds
/* Layers are listed front to back, separated by commas */
background:
url('overlay.png') center / cover no-repeat,
linear-gradient(135deg, #6366f1, #8b5cf6);
/* Each layer can have its own position, size, repeat */
background:
url('dots.svg') top left / 20px 20px repeat,
url('gradient.jpg') center / cover no-repeat,
#060b14;💡 Tip: background-color can only be on the last layer (it has no position/size/repeat). All other layers use images or gradients.