How do I use the css background-clip property?

hoodedvul

This article demonstrates the various values of the CSS background-clip property. It shows the use of content-box, border-box and padding-box values.

Using the demo code.

HTML.

...
 <div>
        <h1>Good Morning HTML</h1>
    </div>
...

CSS.

...
 div {
           width: 400px;
           height: 400px;
           border: 10px double blueviolet;
           margin: 100px auto;
           color: #fff;
           background-image: url(images/rose.jpeg);
           background-clip: content-box;
           background-repeat: no-repeat;           
      }
...

The result is; the image is clipped at the start of the content area.

The result of background-clip: padding-box the image is clipped around the padding area. Inclusive of the padding.

The result of background-clip: border-box which is the default is the same.