You are here: Reference > JavaScript > client-side > style handling > properties > browser specific extensions > OBackgroundSize

OBackgroundSize style property | webkitBackgroundSize style property

Browser support:
OBackgroundSize
webkitBackgroundSize
Sets or retrieves the size of the background image.

Syntax:

object.OBackgroundSize;
object.webkitBackgroundSize;
You can find the related objects in the Supported by objects section below.
OBackgroundSize: This property is read/write.
webkitBackgroundSize: This property is read/write.
CSS page for this property: -o-background-size

Possible values:

The type of this property is string.
 One of the following values: 
 Any of the following values (use the space character to separate them, each value can be used only once): 
round
 This value can be used from 1 to 2 times (use the space character to separate them) 
 One of the following values: 
<size in non-negative length>
size in non-negative percentage
auto
inherit

Description of values:

auto
Default. The size of the background image is equal to the size of the original image.
inherit
Takes the value of this property from the computed style of the parent element.
round
The width and height properties of the background images are rounded down to show images of approximately the same size.
size in non-negative length
The size of the background image in length units. For the supported length units, see the length page.
size in non-negative percentage
The size is the specified percentage of the size of the background positioning area.
Default: auto.

If only one size value is specified, it affects the horizontal and vertical size, too.

Example HTML code 1:

This example illustrates the use of the -o-background-size and -webkit-background-size properties:
<head>
    <style>
        .resBg {
            padding: 30px;
            background: url("area.gif") no-repeat;
            border: 4px dotted green;
            -o-background-size: 60px 60px;
            -webkit-background-size: 60px 60px;
        }
    </style>
</head>
<body>
    <div class="resBg">A division with a resized background image</div>
</body>
Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the OBackgroundSize and webkitBackgroundSize properties in JavaScript:
<head>
    <style>
        .resBg {
            padding: 30px;
            background: url("area.gif") no-repeat;
            border: 4px dotted green;
            -o-background-size: 60px 60px;
            -webkit-background-size: 60px 60px;
        }
    </style>
    <script type="text/javascript">
        function ChangeBgSize (elem) {
            if ('OBackgroundSize' in elem.style) {
                elem.style.OBackgroundSize = "160px 30px";
            } else if ('webkitBackgroundSize' in elem.style) {
                elem.style.webkitBackgroundSize = "160px 30px";
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <div class="resBg" onclick="ChangeBgSize (this);">
        Click this text to change background size!
    </div>
</body>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content