background-image
One or more background images: files or gradients.
Syntax
background-image: url(…);Values
| Parameter | Type | Description |
|---|---|---|
| url() | function | A picture from a file. |
| linear-gradient() | function | A gradient. |
| none | keyword | No image. |
Examples
A photo as a background:
<style>
.box {
height: 120px;
background-image: url(/media/photo-400x250.jpg);
background-size: cover;
}
</style>
<div class="box"></div>Two layers separated by a comma — the first is drawn on top:
<style>
.banner {
padding: 24px;
color: white;
background-image:
linear-gradient(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.5)),
url(/media/photo-600x200.jpg);
background-size: cover;
}
</style>
<div class="banner">Readable text over a darkened photo</div>Notes
A background image is decoration: screen readers do not see it and it has no alt. If the picture carries meaning, use <img>. Always set a background-color too, so the text is readable while the image loads.
See also
- background-size — The size of a background image.
- background-position — Where the background image is placed inside the block.
- background-repeat — Whether the background image repeats to fill the block.
- url() — A reference to a file: an image, a font, a style sheet.
Related recipes
In the tutorial
- Backgrounds and borders — Background images, their repeat, size and position, border styles, rounded corners and outline.