CSS background-size Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

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
Edge Chrome Firefox Opera Safari
1234105
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.44.212.2

Last updated by CSSPortal on: 1st January 2024