CSS background-origin

The CSS background-origin property is used to control the positioning of the background image or background color within an element’s padding box. The padding box is the area that includes the content area and any padding applied to the element.

The background-origin property can take the following values:

1. padding-box (default): The background image or color is positioned relative to the padding box. It starts from the padding edge of the element and is clipped by the content edge.
2. border-box: The background image or color is positioned relative to the border box. It starts from the border edge of the element and extends beyond the padding and content edges.
3. content-box: The background image or color is positioned relative to the content box. It starts from the content edge of the element and is clipped by the padding edge.

Example:

div {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid #000;
  background-image: url('example.jpg');
  background-repeat: no-repeat;
  background-origin: border-box;
}

In this example, we have a <div> element with a background image set to example.jpg. The background-origin property is set to border-box, so the background image will be positioned relative to the border edge of the element. The background image will extend beyond the padding and content edges, covering the entire area within the border.

Changing the background-origin property to padding-box or content-box will reposition the background image relative to the padding box or content box, respectively.

The background-origin property is helpful when you want to precisely control how the background image or color is displayed within an element, especially when combined with other background-related properties like background-position and background-size.