Background Size Property
Last updated: 2026-09-13
background-size Background Size Property
background-size controls the dimensions of a background image and was introduced in CSS3. It supports auto (the image's intrinsic size), cover (cover the entire container), contain (show the whole image inside the container), as well as explicit length and percentage values. The property is very useful in responsive design.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | No |
| Applies To | all |
| Animation Type | length |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
background-size: auto | cover | contain | <length> <percentage>;⚙️ Values
| Value | Type | Description |
|---|---|---|
auto | Keyword | Image's intrinsic size |
cover | contain | Keyword | Cover or contain the container |
<length> | <percentage> | Type | Explicit size values |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-size | ✓ v4 | ✓ v12 | ✓ v4 | ✓ v4.1 | ✓ v10 |
| Supported in all major browsers | |||||
Tip： cover keeps the aspect ratio and fills the container, possibly cropping some content; contain shows the whole image, possibly leaving empty space.
Important： When using size in the background shorthand, it must follow the position and be separated by a slash, e.g. center/cover.
❓ FAQ
QShould I use background-size: cover or contain?
AUse cover when the image must completely cover the container and cropping is acceptable — the long edge fits the container and the short edge is cropped. Use contain when you need to see the whole image and can accept empty space. cover is common for banners and card backgrounds; contain suits product shots, logos, and anything that must display in full. Both preserve the intrinsic aspect ratio, so the image never distorts.
QIs background-size animatable?
AYes. background-size is an interpolable property, so it animates smoothly in transitions and @keyframes, e.g. scaling from background-size: 100% to 110% on hover for a subtle zoom effect. Frequent changes can trigger repaints, though; for performance-sensitive zoom animations prefer transform: scale().
QHow do I make a background fill the area without stretching it?
AUse background-size: cover;. It scales the image by its intrinsic ratio until the shorter side fills the container and the longer side is cropped, so nothing distorts. If the image ratio differs greatly from the container, add background-position: center to control which part is kept. To avoid cropping entirely, use contain (accepting empty space) or match the container's ratio to the image's.
QHow do single and double values in background-size work?
ATwo values set width and height, e.g. background-size: 300px 200px; if height is auto it scales proportionally. One value, e.g. background-size: 300px, sets the width and the height scales automatically to keep the ratio. cover, contain, and auto are special keywords and cannot be mixed with length values.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
