Style backgroundSize property

Definition and usage

backgroundSize Sets or returns the size of the background image.

See also:

HTML Styles:background property

CSS Tutorial:CSS Background

CSS3 Tutorial:CSS3 Background

CSS Reference Manual:background-size property

Example

Specifies the size of the background image:

document.getElementById("myDIV").style.backgroundSize = "60px 120px";

Try it yourself

Syntax

Returns the backgroundSize property:

object.style.backgroundSize

Sets the backgroundSize property:

object.style.backgroundSize = "auto|length|cover|contain|initial|inherit"

Property value

Value Description
auto Default value. The background image includes its width and height.
length

Sets the width and height of the background image.

The first value sets the width, and the second value sets the height.

If only one value is given, the second is set to "auto".
percentage

Sets the width and height of the background image in percentages of the parent element.

The first value sets the width, and the second value sets the height.

If only one value is given, the second is set to "auto".
cover

Scales the background image to as large as possible, covering the entire background area.

Some parts of the background image may not be within the background positioning area.
contain Scales the image to the maximum size, making its width and height fit the content area.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical details

Default value: auto
Return value: A string representing the element's background-size property.
CSS version: CSS3

Browser support

backgroundSize It is a CSS3 (1999) feature.

All browsers fully support it:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Support Support Support Support Support 11