Backgroundorigin

Background-origin is a CSS property that establishes the painting area for an element’s background color and background image. It defines where the background is anchored within the element’s box, relative to the content box, padding box, or border box. The property works alongside other background-related properties such as background-position, background-size, and background-clip to control how backgrounds are displayed.

Values and default: The property accepts border-box, padding-box, and content-box. The default is padding-box, meaning the background is drawn inside the padding edge. In border-box, the background painting area extends to the outer edge of the border box, including the border area. In content-box, the background is limited to the content area, excluding padding and border.

Usage notes: background-origin is useful when you want precise control over where a background begins relative to the element’s box, particularly in conjunction with background-clip to limit how far the background extends. It is commonly used to align backgrounds with specific visual regions, such as avoiding overlap with rounded corners or borders.

Browser support: background-origin is widely supported across modern browsers as part of standard CSS Backgrounds and Borders. It is typically used in conjunction with background-position, background-size, and background-clip to achieve specific layout effects.

See also: background-clip, background-position, background-size, background-color.