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

background-size: contain;

background-size: contain;
background-repeat: no-repeat;

background-size: cover;

background-size: 30%;

background-size: 200px 100px;

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

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