background
A shorthand for all background properties: color, image, position, size and repeat.
Syntax
background: color image position / size repeat;Values
| Parameter | Type | Description |
|---|---|---|
| color | color | A background color. |
| linear-gradient() | function | A gradient — it counts as an image. |
| url() | function | A picture from a file. |
Examples
A color and a gradient:
<div style="background: lightskyblue; padding: 12px;">A plain color</div>
<div style="background: linear-gradient(to right, gold, tomato); padding: 12px;">A gradient</div>A photo covering the block — position and size are separated by a slash:
<style>
.hero {
height: 120px;
background: url(/media/photo-800x500.jpg) center / cover no-repeat;
color: white;
padding: 12px;
}
</style>
<div class="hero">A photo as a background</div>Notes
background resets every background property it does not mention. If you only need to change the color, write background-color — this will not erase an image set elsewhere.
See also
- background-color — The background color of an element.
- background-image — One or more background images: files or gradients.
- background-size — The size of a background image.
- linear-gradient() — A smooth transition between colors along a straight line — used as a background image.
Related recipes
In the tutorial
- Backgrounds and borders — Background images, their repeat, size and position, border styles, rounded corners and outline.