CSS background-size Property

Description

The background-size property specifies the size of the background images. The size of the image can be fully constrained or only partially in order to preserve its intrinsic ratio.

Initial value

auto

Applies to

All elements

Inherited

No

Media

Visual

Computed value

As specified, but with lengths made absolute

Animatable

Yes

CSS Version

CSS3

JavaScript syntax

object.style.backgroundSize

Syntax

background-size: <bg-size> [ , <bg-size> ]* 

Values

• <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

Desktop
9	12	3	4	10	5
Tablets / Mobile
2.2	18	4	10.1	4.2	1.0

Last updated by CSSPortal on: 20th October 2019