CSS - background-clip Property

The background-clip CSS property is used to specify how the background image or color should be displayed within an element's padding box, border box or content box. It determines the area of an element to which the background will be applied.

In the absence of a background-image or background-color, the background-clip property will have a visual effect when border is either partially opaque or transparent.

Since the root element has a canvas background and its background painting area extends covering the entire canvas, the property background-clip has no effect when specified on root element.

Possible Values

  • border-box − Background is applied to the entire element, i.e. outside edge of the border, including the padding and border.

  • padding-box − Background is applied to the padding area of the element, i.e. outside edge of padding, excluding the border.

  • content-box − Background is applied to the content area of the element, i.e. within the content box, excluding the padding and border.

  • text − Background is clipped to the foreground text characters of the element.

Check the contrast ratio of background color and foreground color, while using the background-clip property, as it should be clear enough for people experiencing low vision conditions. Also, add a fallback background-color in case the background image fails to load.

Applies to

All the HTML elements.

DOM Syntax

object.style.backgroundClip = "border-box | padding-box | content-box | text";

CSS background-clip Example

The following example demonstrates how to use different background-clip values (border-box, padding-box, content-box, text) to the paragraph elements to clipped the background −

<html>
<head>
<style>  
   p {
      border: 10px rgb(13, 7, 190);
      border-style: dashed double;
      margin: 5px;
      padding: 1cm;
      background: linear-gradient(60deg, rgb(208, 233, 143), rgb(216, 238, 243), rgb(197, 190, 241), rgb(220, 174, 119), rgb(237, 111, 189));
      font: 700 1em sans-serif;
   }
   .border-area {
      background-clip: border-box;
   }
   .padding-area {
      background-clip: padding-box;
   }
   .content-area {
      background-clip: content-box;
   }
   .text-area {
      background-clip: text;
      -webkit-background-clip: text;
      color: gray;
   }
</style>
</head>
<body>
   <p class="border-area">Background applied to the entire element.</p>
   <p class="padding-area">Background applied to the padding area.</p>
   <p class="content-area">Background applied only to the content area.</p>
   <p class="text-area">Background is clipped to the foreground text.</p>
</body>
</html>

CSS background-clip - Using Background Image

The following example demonstrates how to clipped background image using background-clip property −

<html>
<head>
<style>  
   div {
      border: 10px rgb(13, 7, 190);
      border-style: dashed;
      margin: 5px;
      padding: 1cm;
      font: 700 1em sans-serif;
      display: inline-block;
      background-image: url('images/white-flower.jpg');
      height: 200px;
      width: 200px;
   }
   .border-area {
      background-clip: border-box;
   }
   .padding-area {
      background-clip: padding-box;
   }
   .content-area {
      background-clip: content-box;
   }
</style>
</head>
<body>
   <div class="border-area">background applied to complete element</div>
   <div class="padding-area">background applied to padding box</div>
   <div class="content-area">background applied to content only</div>
</body>
</html>
Advertisements