background-origin

Definition

The background-origin property in CSS specifies the origin of the background image or background position. It can be used to determine the position of the background image relative to the element's content, padding, or border.

Examples

Setting the origin of the background image to the element's padding box:

.padding {
  width: 200px;
  height: 200px;
  background-image: url('image.jpg');
  background-origin: padding-box;
}

Setting the origin of the background image to the element's border box:

.border {
  width: 200px;
  height: 200px;
  background-image: url('image.jpg');
  background-origin: border-box;
}

Setting the origin of the background image to the element's content box:

.content {
  width: 200px;
  height: 200px;
  background-image: url('image.jpg');
  background-origin: content-box;
}

Values

Best Practices

• Use background-origin to specify the origin of the background image or background position.
• The default value for background-origin is padding-box, which means that the background is painted within the element's padding box.
• Use background-origin in combination with other background properties, such as background-image, background-color, and background-position, to create more complex and customized backgrounds.
• Keep in mind that the background-origin property only affects the positioning of the background image or gradient, not the size of the background. To specify the size of the background, use the background-size property.
• Use the background-origin property in conjunction with the background-clip property to control the appearance of the background image or gradient.

Browser Compatibility