CssHow-ToBeginner · 3 min read

How to Set Multiple Backgrounds in CSS: Syntax and Examples

You can set multiple backgrounds in CSS by listing several background-image values separated by commas. Each background can have its own background-position, background-size, and other properties, also separated by commas, to control how they appear stacked.

📐

Syntax

To set multiple backgrounds, use the background-image property with comma-separated URLs or gradients. You can also set background-position, background-repeat, and background-size with matching comma-separated values for each background layer.

The first background is on top, and the last is at the bottom.

css

selector {
  background-image: url('image1.png'), url('image2.png'), linear-gradient(to right, red, blue);
  background-position: center top, left bottom, center center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 100px 100px, 50px 50px, cover;
}

💻

Example

This example shows a box with two images and a gradient layered as backgrounds. The top image is centered at the top, the second image is at the bottom left, and the gradient covers the entire box behind them.

css

html, body {
  height: 100%;
  margin: 0;
}

.box {
  width: 300px;
  height: 200px;
  border: 2px solid #333;
  background-image: url('https://via.placeholder.com/100x100.png?text=Top'), url('https://via.placeholder.com/50x50.png?text=Bottom'), linear-gradient(to right, #ff7e5f, #feb47b);
  background-position: center top, left bottom, center center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 100px 100px, 50px 50px, cover;
  margin: 20px auto;
}

Output

⚠️

Common Pitfalls

Common mistakes include:

Not matching the number of values in background-position, background-repeat, or background-size to the number of backgrounds.
Forgetting that the first background is on top, so order matters.
Using shorthand background property incorrectly with multiple backgrounds.

css

/* Wrong: missing background-position for second image */
.selector {
  background-image: url('img1.png'), url('img2.png');
  background-position: center;
}

/* Right: specify position for both backgrounds */
.selector {
  background-image: url('img1.png'), url('img2.png');
  background-position: center, bottom right;
}

📊

Quick Reference

Property	Purpose	Example Value
background-image	Sets one or more background images	url('img1.png'), url('img2.png'), linear-gradient(red, blue)
background-position	Positions each background image	center top, left bottom, center center
background-repeat	Controls repeating of each background	no-repeat, repeat-x, no-repeat
background-size	Sets size of each background image	100px 100px, 50px 50px, cover

✅

Key Takeaways

Use comma-separated values in background-image to add multiple backgrounds.

Match the number of values in background-position, background-repeat, and background-size to the number of backgrounds.

The first background is drawn on top; order your layers accordingly.

Use no-repeat to prevent images from repeating if desired.

You can mix images and gradients as background layers.