Cover Image for CSS background-clip
137 views

CSS background-clip

The CSS background-clip property is used to control how the background image or background color of an element is clipped to its box. It determines the region of the element where the background will be visible.

The background-clip property has the following syntax:

selector {
  background-clip: value;
}
  • selector: Represents the HTML element or class to which the background-clip property will be applied.
  • value: Specifies the clipping area for the background. It can take one of the following values:
  • border-box (default): The background is clipped to the border box of the element, including the content, padding, and border areas.
  • padding-box: The background is clipped to the padding box of the element, excluding the border area.
  • content-box: The background is clipped to the content box of the element, excluding both the padding and border areas.
  • text: The background is clipped to the foreground text of the element. This allows the background to be visible only where there is text content.

Example:

div {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 1px solid black;
  background-image: url('background-image.jpg');
  background-color: red;
}

.border-box {
  background-clip: border-box;
}

.padding-box {
  background-clip: padding-box;
}

.content-box {
  background-clip: content-box;
}

.text {
  background-clip: text;
  color: transparent;
}

In this example, we have a <div> element with a background image and a red background color. We apply different background-clip values to different classes:

  • The class .border-box applies the default background-clip: border-box;, so the background is visible inside the entire border box (content, padding, and border areas).
  • The class .padding-box sets background-clip: padding-box;, so the background is visible only inside the padding area, excluding the border area.
  • The class .content-box sets background-clip: content-box;, so the background is visible only inside the content area, excluding both the padding and border areas.
  • The class .text sets background-clip: text; and makes the text transparent using color: transparent;, so the background image is visible only where there is text content.

The background-clip property is a useful tool for creating interesting and unique visual effects in CSS, especially when combining it with other CSS properties like gradients, borders, and background images.

YOU MAY ALSO LIKE...

The Tech Thunder

The Tech Thunder

The Tech Thunder


COMMENTS