References

Beginner-friendly references for web development, with live, editable examples.

The CSS background property

Property CSS All modern browsers Updated
Quick answer

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

Live example 
<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

Live example 
<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>

More Examples

Animated Background Bubbles CSS

Animated Background Bubbles CSS

525 0
CSS Animated Mesh Gradient Background

CSS Animated Mesh Gradient Background

412 0
Animated Gradient Background CSS

Animated Gradient Background CSS

410 0
Fullscreen Video Background Hero CSS

Fullscreen Video Background Hero CSS

394 0
Transparent Login Form CSS

Transparent Login Form CSS

384 0
Interactive Orb Constellation JS

Interactive Orb Constellation JS

298 0
Liquid Morphing Gradient Background CSS

Liquid Morphing Gradient Background CSS

229 0
Interactive Starfield Canvas Background JS

Interactive Starfield Canvas Background JS

158 0

Best practices

  • Use the center / cover no-repeat recipe 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?
Use the shorthand, e.g. 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?
Add 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?
Stack a gradient on top: 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.
aspect-ratio background-color