In order to access this site you need to enable JavaScript!

You are here: Reference > CSS > properties > browser specific extensions > -o-background-size

-o-background-size property | -webkit-background-size property

Browser support:

-o-background-size:

-webkit-background-size:

Sets the size of the background image.

JavaScript page for this property: OBackgroundSize | webkitBackgroundSize. You can find other example(s) there.

Possible values:

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>