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

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

webkitBackgroundComposite style property

Browser support:

Sets or retrieves the compositing style for an element's background image and color.

Syntax:

object.webkitBackgroundComposite;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: -webkit-background-composite

Possible values:

The type of this property is string.

One of the following values:

border

The background extends into the border of the element.

clear

Ignore both background image and color settings.

copy

Ignore background color settings.

destination-atop

destination-in

destination-out

destination-over

The background color is over the background image.

highlight

inherit

Takes the value of this property from the computed style of the parent element.

padding

The background does not extend into the border.

plus-darker

plus-lighter

source-atop

source-in

source-out

source-over

Default. The background image is over the background color.

xor

Default: source-over.

Example HTML code 1:

This example illustrates the use of the -webkit-background-composite property:

<head>
    <style>
        .common {
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: rgba(0, 0, 255, 0.4);
            background-image: url("border.png");
            background-repeat: no-repeat;
            background-position: 50% 50%;

            color: #ffffff;
            float: left;
        }

        .clear {
            -webkit-background-composite: clear;
        }
        .copy {
            -webkit-background-composite: copy;
        }
        .source_over {
            -webkit-background-composite: source-over;
        }
        .dest_over {
            -webkit-background-composite: destination-over;
        }
    </style>
</head>
<body>
    <div class="common clear">clear</div>
    <div class="common copy">copy</div>
    <div class="common source_over">source-over</div>
    <div class="common dest_over">destination-over</div>
</body>