background-size
The size of a background image.
Syntax
background-size: value;Values
| Parameter | Type | Description |
|---|---|---|
| cover | keyword | Covers the whole block; edges may be cut off. |
| contain | keyword | Fits entirely; empty areas may remain. |
| width height | length | An exact size: `100px 50px`, `50%`, or one value with `auto` height. |
Examples
cover, contain and a fixed size:
<style>
div {
display: inline-block;
width: 140px; height: 100px;
border: 1px solid gray;
background: lightgray url(/media/photo-400x250.jpg) center no-repeat;
}
</style>
<div style="background-size: cover;"></div>
<div style="background-size: contain;"></div>
<div style="background-size: 50px;"></div>Notes
For <img> and <video> the same job is done by object-fit.
See also
- background-image — One or more background images: files or gradients.
- background-position — Where the background image is placed inside the block.
- object-fit — How the picture of an `<img>` or `<video>` fits into the element's box.
Related recipes
In the tutorial
- Backgrounds and borders — Background images, their repeat, size and position, border styles, rounded corners and outline.