CSS background Property

Definition and Usage

The background property is a shorthand that paints the area behind an element's content. In one line you can set background-color, background-image, background-position, background-size, background-repeat, background-attachment, background-origin, and background-clip.

List layers with commas. The first layer is on top. The color may appear only on the last layer. Any longhand you omit is reset to its initial value for that layer. The shorthand also resets background-blend-mode. It applies to every element, including ::first-letter and ::first-line, and it is not inherited.

CSS Syntax

Recommended order for one layer: image, position / size, repeat, attachment, then color last. Size is valid only after position with a slash.

Property Values

How to Use background

Pick the element, give it a visible box, then write one shorthand line for the paint you need.

1. Set background on the element that should show the paint. It is not inherited.
2. Give that element a size when you use an image. Content or a height is enough.
3. Write color only, or image with position / size and repeat. Put size after the slash.
4. For stacked paint, separate layers with commas. Keep the color on the last layer.

Live Preview

One box. Change the background shorthand and watch the paint behind the label.

CSS Examples

Each snippet adds only what background needs: a box, and one shorthand line. Use Try It Yourself for a live editor.

<style>
  div {
    padding: 16px;
    background: #dbeafe;
  }
</style>

<div>Solid fill</div>

<style>
  div {
    height: 140px;
    padding: 16px;
    color: #fff;
    background: #0f172a linear-gradient(135deg, #2563eb, #7c3aed) no-repeat center / cover;
  }
</style>

<div>Hero fill</div>

<style>
  div {
    height: 140px;
    padding: 16px;
    color: #fff;
    background:
      linear-gradient(rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.55)),
      linear-gradient(135deg, #0ea5e9, #6366f1) #0f172a;
  }
</style>

<div>Tint on top</div>

Key Takeaways