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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content