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 valueauto
  • Applies toAll elements
  • InheritedNo
  • MediaVisual
  • Computed valueAs specified, but with lengths made absolute
  • AnimatableYes
  • CSS VersionCSS3
  • JavaScript syntaxobject.style.backgroundSize
Formal syntax: <bg-size> [ , <bg-size> ]* 

background-size: 80%;
background-size: 50px;
background-size: auto;
background-size: contain;
background-size: cover;
<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.
.class {
   background-size: 50% auto;
}
4+Firefox9+Explorer4+Chrome5+Safari10.5+Opera


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.