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

You are here: Reference > CSS > properties > browser specific extensions > -webkit-background-composite

-webkit-background-composite property

Browser support:

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

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

Possible values:

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>