background-clip

The background-clip property defines how the background color or background picture should be displayed below the borders.

Initial Value border-box
Applies to All elements, including ::first-letter and ::first-line
Inheritance no
Animation discrete

The background-clip property sets how the background fill or background picture will be placed relative to the element: part of the background will go under the border, the background will not go under the border, or the background will only be placed over the element content (that is, padding will push the background back).

What is the difference between the background-origin and background-clip property?

The difference is that the background-clip property, unlike background-origin, cuts off the background’s part that falls outside the specified frames. The background-origin property only defines how the background image is positioned.

Syntax

/* Keyword values */

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

/* Global values */

background-clip: inherit;
background-clip: initial;
background-clip: revert;
background-clip: unset;

Description

valuewhat it does
padding-boxIndents cut off the background.
border-boxDisplay the background up to the edge of the element. However, if a border is present, it will be hidden behind it. This is the initial value.
content-boxThe background is clipped to the content.
textDisplay the background inside the text. The background that is clipped to the shape of the letters is not visible anywhere else. If the background image is clipped with text, specify an alternate color in case the image is not displayed for some reason.
inheritThe value is inherited from the parent element.
initialSets the default value.

Example

border-box
padding-box
content-box
text
 

And here is an example of using background-clip: text; to overlay text with an image.

background-clip image overlay
CSSHTML
/* background-clip: text; example */

.example-lay > div {
    margin: 1rem auto 0 auto;
    padding: 2rem 1rem;
    background: url(https://c6c8j7x5.rocketcdn.me/wp-content/uploads/2022/09/Stable-Diffusion-Resources.png) no-repeat;
    background-size: cover;
    font-size: 3rem;
    font-weight: bold;
}

#overlay_boxc {
    background-clip: text;
    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .0);
}
<section class="example-lay">
<div id="overlay_boxc">background-clip image overlay</div>
</section>