CSS background-size Property
Description
The background-size
CSS property is used to control the size of a background image in relation to its containing element. It allows web developers to specify how an image should be scaled, whether it should cover the entire element, be contained within it, or take up a specific percentage of the element's dimensions. This property is particularly useful for responsive web design, allowing images to adapt to different screen sizes and aspect ratios while maintaining their desired proportions and visual impact. By adjusting the background-size
property, designers can achieve various visual effects and ensure that background images complement the overall layout and design of a web page.
- Initial value
- auto
- Applies to
- All elements
- Inherited
- No
- Computed value
- As specified, but with lengths made absolute
- Animatable
- Yes
- JavaScript syntax
- object.style.backgroundSize
Interactive Demo
Syntax
background-size: <bg-size> [ , <bg-size> ]*
Values
<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain- <length>A floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px).
- <percentage>An integer, followed by a percent (%). A percentage value is relative to the background positioning area.
- autoScales the background image in the corresponding direction such that its intrinsic proportion is maintained.
- containScale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.
- coverScale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.
Example
<div> </div>
div {
height: 200px;
border: 2px solid #000;
background: url(images/diamond.png) no-repeat;
background-size: cover;
}
Browser Support
The following table will show you the current browser support for the CSS background-size
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
12 | 3 | 4 | 10 | 5 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
18 | 4 | 10.4 | 4.2 | 1 | 2.2 |
Last updated by CSSPortal on: 1st January 2024