Backgrounds
Backgrounds add color, images, and gradients behind element content.
Demo: Background Variations
HTML
<div class="solid">Solid color</div>
<div class="gradient">Gradient</div>
<div class="image">Image background</div>
<div class="multiple">Multiple backgrounds</div> CSS
div { padding: 24px 16px; margin: 4px 0; border-radius: 8px; color: white; font-weight: bold; text-align: center; }
.solid { background: #6366f1; }
.gradient { background: linear-gradient(135deg, #6366f1, #ec4899); }
.image {
background: url("data:image/svg+xml,%3Csvg width=%2240%22 height=%2240%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Ccircle cx=%2220%22 cy=%2220%22 r=%222%22 fill=%22white%22/%3E%3C/svg%3E") repeat;
background-color: #1e293b;
}
.multiple {
background:
linear-gradient(135deg, rgba(99,102,241,0.8), rgba(236,72,153,0.8)),
url("data:image/svg+xml,%3Csvg width=%2260%22 height=%2260%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Ccircle cx=%2230%22 cy=%2230%22 r=%223%22 fill=%22white%22/%3E%3C/svg%3E") repeat;
}Live Output Window
Background Properties
| Property | What It Does |
|---|---|
background-color | Solid color behind content |
background-image | Image or gradient |
background-repeat | How the image tiles (repeat, no-repeat, etc.) |
background-position | Where the image is placed (center, top left, etc.) |
background-size | Image dimensions (cover, contain, or explicit) |
background-attachment | Fixed or scrolls with content |
background | Shorthand for all the above |
Shorthand
background: #6366f1 url("bg.png") no-repeat center / cover;
This sets color, image, repeat, position, and size in one line.