CSS background Property

What You’ll Learn

The background property is a shorthand that sets color, images, position, size, repeat, and more in one line. It is one of the most useful shortcuts in CSS for styling element backgrounds quickly.

Definition and Usage

The background CSS shorthand property sets all background-related longhand properties at once. Instead of writing six or more separate declarations, you can combine them into a single rule.

This is especially helpful for hero banners, cards, and sections where you need a background color, an image or gradient, centered placement, and cover sizing together.

📝 Syntax

The background shorthand accepts multiple values in a specific order:

selector {
  background: [color] [image] [repeat] [attachment] [position] / [size] [origin] [clip];
}

Basic Example

.hero {
  background: #fff7ed linear-gradient(135deg, #2563eb, #7c3aed) no-repeat center / cover;
}

Syntax Rules

• Omitted values reset to their initial state for that layer.
• background-size must follow background-position with a slash (/).
• You can set only a color: background: #eff6ff;
• Gradients count as background-image values.
• Use longhand properties when you need to update one value independently.

Default Value

When no background is declared, the element background is transparent. Each longhand property inside the shorthand has its own initial value, such as background-repeat: repeat and background-color: transparent.

💎 Property Values

The background shorthand can include these component values:

Shorthand Components

The background property combines these longhand properties. Learn each one individually for deeper control:

Shorthand vs Longhand

Examples Gallery

Try the background shorthand with a hero banner, solid color, repeating pattern, and a longhand comparison.

.hero {
  background: #fff7ed linear-gradient(135deg, #2563eb, #7c3aed) no-repeat center / cover;
  min-height: 12rem;
}

.card {
  background: #dbeafe;
  padding: 1.5rem;
  border-radius: 0.75rem;
}

.panel {
  background: #ecfdf5 radial-gradient(circle, #059669 0 5px, transparent 6px) repeat center / 24px 24px;
}

/* Shorthand */
.shorthand {
  background: #eff6ff linear-gradient(135deg, #2563eb, #ec4899) no-repeat center / contain;
}

/* Longhand equivalent */
.longhand {
  background-color: #eff6ff;
  background-image: linear-gradient(135deg, #2563eb, #ec4899);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

💡 Best Practices