CSS Backgrounds

CSS backgrounds paint the area behind an element's content and padding. You can use a plain color, an image, a gradient, or several layered together.

Background Properties

• background-color: a solid fill color
• background-image: url(...) or a gradient
• background-repeat: repeat, no-repeat, repeat-x, repeat-y
• background-position: center, top right, 20px 40px
• background-size: cover, contain or exact sizes
• background: shorthand for all of the above

CSS Gradients

Gradients are generated images, so they go in background-image (or background). linear-gradient blends along a line, radial-gradient spreads from a center point.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
div { height: 100px; margin: 10px 0; border-radius: 10px; }
.linear { background: linear-gradient(to right, #06b6d4, #8b5cf6); }
.angle { background: linear-gradient(135deg, #f97316 0%, #facc15 50%, #22c55e 100%); }
.radial { background: radial-gradient(circle, #fde68a, #b45309); }
</style>
</head>
<body>
<div class="linear"></div>
<div class="angle"></div>
<div class="radial"></div>
</body>
</html>

Background Image With Cover

background-size: cover scales the image to fill the whole box, cropping if needed. Pair it with background-position: center so the middle stays visible. Here a gradient stands in for a photo so the example works offline.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
.hero {
  height: 220px;
  display: grid;
  place-items: center;
  color: white;
  font: bold 28px sans-serif;
  background:
    linear-gradient(rgb(0 0 0 / 40%), rgb(0 0 0 / 40%)),
    radial-gradient(circle at 30% 40%, #60a5fa, #1e3a8a);
  background-size: cover;
  background-position: center;
}
</style>
</head>
<body>
<div class="hero">Hero Section</div>
</body>
</html>

Repeating Patterns

A small background-size with repeat turns a gradient into a pattern, such as stripes or dots.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
.dots {
  height: 150px;
  background-color: #f1f5f9;
  background-image: radial-gradient(#94a3b8 2px, transparent 2px);
  background-size: 20px 20px;
}
</style>
</head>
<body>
<div class="dots"></div>
</body>
</html>

Frequently asked questions

How do I make a background image cover the whole page?

Set the image on body or a full-height container with background-size: cover and background-position: center, and give the element enough height such as min-height: 100vh.

What is the difference between cover and contain?

cover fills the whole box and may crop the image; contain shows the whole image and may leave empty space.

Can I use multiple backgrounds in CSS?

Yes. Separate layers with commas in background or background-image. The first layer listed is drawn on top.