HTML - DOM Style Object backgroundSize Property

Quiz

HTML DOM Style Object backgroundSize property sets or returns the size of the background image.

Syntax

Given below are the syntax to get or set the backgroundSize property.

Set the backgroundSize property:

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

Get the backgroundSize property:

object.style.backgroundSize;

Property Values

Value	Description
auto	It is the default value which sets and displays the background image in it's original size.
length	It sets the width and height of the background image. The first value represents width while second value represents the height. If only one value is provided then by default other value is set to auto.
percentage	It sets the width and height of the background image in percentage of parent element. The first value represents width while second value represents the height. If only one value is provided then by default other value is set to auto.
cover	It scales the background image to be as large as to cover the entire background area.
contain	It scales the background image to be as large so that both it's width and height can fit inside the container area.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents background-size property of an element.

Examples of HTML DOM Style Object 'backgroundSize' Property

The following examples illustrates to set size of background image using backgroundSize property values.

Set the Size of Background Image

The following example illustrates to set size of background image using auto, length and percentage.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object backgroundSize Property
    </title>
    <style>
        #origin {
            width: 400px;
            height: 300px;
            border: 1px solid black;
            background: url('/html/images/logo.png') no-repeat;
        }
    </style>
</head>
<body>
    <p>Click to change size of background image.</p>
    <button onclick="auto()">
        Auto
    </button>
    <button onclick="length()">
        Change Length</button>
    <button onclick="percentage()">
        Change Percentage
    </button>
    <div id="origin">
        Here is some random text to bore you...
        Lorem ipsum dolor sit amet consectetur 
        adipisicing elit. Debitis 
        voluptatum quasi corporis commodi 
        eligendi nobis magni natus veniam 
        distinctio, earum aspernatur ipsa 
        molestiae? Expedita modi sit ratione 
        voluptatem id.
    </div>
    <script>
        function auto() {
            document.getElementById("origin")
            .style.backgroundSize = "auto";
        }
        function length() {
            document.getElementById("origin")
            .style.backgroundSize = " 200px 150px";
        }
        function percentage() {
            document.getElementById("origin")
            .style.backgroundSize = "20% 10%";
        }
    </script>
</body>
</html>

Set the Background Size using 'cover' and 'contain'.

The following example illustrates to set size of background image using cover and contain.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object backgroundSize Property
    </title>
    <style>
        #origin {
            width: 400px;
            height: 300px;
            border: 1px solid black;
            background: url('/html/images/logo.png') no-repeat;
        }
    </style>
</head>
<body>
    <p>Click to change size of background image.</p>
    <button onclick="cover()">
        Cover
    </button>
    <button onclick="contain()">
        Contain
    </button>
    <div id="origin">
        Here is some random text to bore you...
        Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Debitis 
        voluptatum quasi corporis commodi eligendi 
        nobis magni natus veniam 
        distinctio, earum aspernatur ipsa molestiae?
        Expedita modi sit ratione 
        voluptatem id.
    </div>
    <script>
        function cover() {
            document.getElementById("origin")  
            .style.backgroundSize = "cover";
        }
        function contain() {
            document.getElementById("origin")
            .style.backgroundSize = "contain";
        }
    </script>
</body>
</html>

Supported Browsers

Property
backgroundSize	Yes 3	Yes 12	Yes 4	Yes 5	Yes 10

html_dom.htm

Print Page