Style backgroundSize attribute

Definition and usage

backgroundSize Set or return the size of the background image property.

See also:

HTML Style:background property

CSS Tutorial:CSS ɗanin background

CSS3 Tutorial:CSS3 Background

CSS Reference Manual:background-size property

Example

Specify the size of the background image:

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

Try it yourself

Syntax

Return the backgroundSize property:

object.style.backgroundSize

Set the backgroundSize property:

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

Attribute value

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

Set the width and height of the background image.

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

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

Set the width and height of the background image as a percentage of the parent element.

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

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

Scale the background image as large as possible so that the background area is completely covered by the background image.

Some parts of the background image may not be in the background positioning area.
contain Scale the image to the maximum size so that its width and height are suitable for the content area.
initial Set this property to its default value. See initial.
inherit Inherit this property from its parent element. See inherit.

Technical details

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

Browser support

backgroundSize Is a CSS3 (1999) feature.

All browsers fully support it:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Tukuri Tukuri Tukuri Tukuri Tukuri 11