CSS background-size Property

CSS background-size property specifies the size of the background image for an element.

CSS background-size property accept 3 different types of values:

  • keywords (e.g. auto, cover, and contain)
  • width (e.g. width of the image and height will be auto)
  • width height (e.g. width of the image, height of the image)


The following table outline the usages and version history of this property.

Default value: auto
Applies to: All elements
Inherited: No
Version: CSS3
JavaScript Syntax: object.style.backgroundSize = "40px 60px"


Here is a syntax for the CSS background-size property

background-position: auto | cover | contain | length | percentage | initial | inherit;

Property Values

The following table describes the values of this property.

Value Description
auto Default. Specifies that background image is displayed in original size
cover Specifies that background image is resized and cover the entire container of an element
contain Specifies that background image is resized and scales the image as much as possible to ensure image is fully visible
length Sets width and height of the background image for an element
percentage Sets width and height of the background image in percent relative to the element
initial Sets default value of this property
inherit Inherits this property from its parent element.


The example below shows to sets background size auto, cover, contain, length, percentage values.

.auto {
  background-size: auto;
.cover {
  background-size: cover;
.contain {
  background-size: contain;
.length_width {
  background-size: 50px;
  background-repeat: no-repeat;
.length {
  background-size: 50px 80px;
  background-repeat: no-repeat;
.percentage_width {
  background-size: 50%;
  background-repeat: no-repeat;
.percentage {
  background-size: 100% 100%;

Run it...   »

Browser Compatibility

  • Google Chrome 4+
  • Mozilla Firefox 4+
  • Internet Explorer 9+
  • Opera 10.5+
  • Safari 4.1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.