The CSS background property
The CSS background property is a shorthand that sets every background layer at once — color, image, gradient, position, size and repeat. A common form is background: url(photo.jpg) center / cover no-repeat;. For just a solid fill, background-color is the simpler, clearer choice.
Overview
background rolls all the background sub-properties into one line: the color, an image or gradient, where it sits, how big it is, and whether it tiles. It is efficient once you know the order, and it resets any sub-property you leave out — which is handy for wiping previous styles in a single declaration.
The piece people reach for most is the image-with-cover recipe: background: url(hero.jpg) center / cover no-repeat;. That centers the image, scales it to cover the whole box without distortion, and stops it tiling — the standard way to set a hero banner. The slash separates the position from the size, so center / cover reads as "positioned center, sized cover."
You can stack multiple backgrounds by comma-separating them, with the first listed sitting on top — useful for layering a gradient tint over a photo. For a plain color, though, do not reach for the shorthand out of habit; background-color: #f5f7fb says exactly what it does and is less likely to wipe something by accident.
Syntax
selector {
background: color image position / size repeat;
}
/* full-bleed hero image */
.hero {
background: url(hero.jpg) center / cover no-repeat;
}Values
The background property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.
| Value | Description |
|---|---|
color |
A solid fill, the same as background-color, e.g. #f5f7fb. |
url() |
An image source, e.g. url(photo.jpg). |
gradient |
A CSS gradient such as linear-gradient(#1c7ce9, #0f5fc2). |
position / size |
Where the image sits and how it scales, e.g. center / cover. |
repeat |
How an image tiles: no-repeat, repeat-x, repeat-y or repeat. |
Examples
<style>
.hero {
background: linear-gradient(135deg, #1c7ce9, #6d28d9);
color: #fff;
padding: 40px 24px;
border-radius: 12px;
text-align: center;
font: 700 20px system-ui, sans-serif;
}
</style>
<div class="hero">A gradient background in one line</div>Example #2
<style>
.tinted {
background: linear-gradient(rgb(15 23 42 / 0.55), rgb(15 23 42 / 0.55)),
url(https://picsum.photos/600/200) center / cover no-repeat;
color: #fff;
padding: 44px 20px;
border-radius: 12px;
text-align: center;
font: 700 18px system-ui, sans-serif;
}
</style>
<div class="tinted">Readable text over a tinted photo</div>Best practices
- Use the
center / cover no-repeatrecipe for hero images so they fill the area cleanly at any screen size. - Layer a semi-transparent gradient over a photo (
linear-gradient(rgb(0 0 0 / 0.4), transparent), url(...)) to keep overlaid text readable. - For a plain color, prefer background-color — it is clearer and will not silently reset other background values.
- Provide a fallback background-color behind an image so the area is not blank while the image loads or if it fails.
Accessibility
Background images are decorative as far as assistive technology is concerned — they are not announced and cannot carry alt text, so never put information a user needs (a chart, a price, important words) into one. If the image conveys meaning, use a real <img> with alt text instead.
The bigger trap is text placed over a busy background. Contrast can pass in one corner and fail in another, so add a solid or gradient overlay to guarantee the text color clears the usual 4.5:1 ratio across the whole area, not just where you happened to test it.
Frequently asked questions
How do I add a background image in CSS?
background: url(photo.jpg) center / cover no-repeat;. That sets the image, centers it, scales it to cover the box and stops it tiling.What is the difference between background and background-color?
background is a shorthand for every background layer (color, image, position, size, repeat). background-color sets only the solid fill — clearer when that is all you need.How do I make a background image cover the whole element?
cover as the size, e.g. background: url(img.jpg) center / cover no-repeat;. The image scales to fill the box while keeping its aspect ratio, cropping any overflow.How do I put a color over a background image?
background: linear-gradient(rgb(0 0 0 / 0.4), rgb(0 0 0 / 0.4)), url(img.jpg) center / cover;. The first layer tints the image beneath it.