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

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content