CSS ‘background-origin’ Property Explained

The CSS ‘background-origin‘ property specifies the origin position of the background image(s). The origin is the initial positioning area of the background images before they are placed and sized according to background position and background size. Essentially, it determines from which part of the box model the background starts: the border box, padding box, or content box.

CSS ‘background-origin’ Property Examples

See the Pen CSS ‘background-origin’ Property by Webzstore (@webzstore) on CodePen.

The ‘background-origin‘ property offers significant flexibility in how background images are integrated into an element’s overall design, allowing for nuanced control over their positioning and presentation in relation to the box model.

Browser Support For ‘background-origin’ Property

4.0	3.0	4.0	9.0	10.5

CSS Syntax of the ‘background-origin’ Property

background-origin: border-box | padding-box | content-box | initial | inherit;

Usage of the ‘background-origin’ Property

Use ‘background-origin‘ when you need precise control over where your background images begin within an element’s box. It’s particularly useful in designs where the background needs to align tightly with the content, padding, or border areas, affecting how backgrounds integrate with the page’s overall layout and visual hierarchy.

Property Values of the ‘background-origin’ Property

• Border-box: The background image starts from the outer edge of the border. If the element has a border, the background image will be underneath it.
• Padding-box: The background image starts from the outer edge of the padding. No background is drawn beneath the border.
• Content-box: The background image is placed and sized based on the content area only. It does not extend under the padding or border.
• Initial: Sets the property to its default value (padding-box for most browsers), effectively resetting any previous custom settings.
• Inherit: Inherits the background-origin property from the element’s parent, ensuring consistency within nested elements.