CSS Background Origin

The background-origin property in CSS determines the positioning area of the background image. It specifies where the background image is positioned in relation to the element's border, padding, or content box.

Background Origin Values

The background-origin property can take several values. Here are the common values you can use:

Value Description Example
border-box The background image starts from the upper-left corner of the border box.
Background Origin: Border Box - The background image or color will extend to the outer edge of the border, making it appear as part of the border.
padding-box The background image starts from the upper-left corner of the padding box.
Background Origin: Padding Box - The background image or color will start from the outer edge of the padding, excluding the border, making the background appear within the padding area.
content-box The background image starts from the upper-left corner of the content box.
Background Origin: Content Box - The background image or color will only extend to the outer edge of the content, not including the padding or border, making it appear only within the content area.

Using Background Origin in CSS

Here's how you can apply different background origin values to your elements using CSS:

Example: Border Box
Try yourself 
        
            .border-box {
    background-origin: border-box;
    background-color:green;
    background-image: url('/images/common/cutecat100x128.png');
    border: 45px dotted darkred;
    padding: 80px;
    margin: 10px;
    height: 550px;
    width: 550px;
    background-repeat: no-repeat;
}

This will render the background image starting from the upper-left corner of the border box.

Example: Padding Box
Try yourself 
        
            .padding-box {
    background-origin: padding-box;
    background-color:green;
    background-image: url('/images/common/cutecat100x128.png');
    border: 45px dotted darkred;
    padding: 80px;
    margin: 10px;
    height: 550px;
    width: 550px;
    background-repeat: no-repeat;
}

This will render the background image starting from the upper-left corner of the padding box.

Example: Content Box
Try yourself 
        
            .content-box {
    background-origin: content-box;
    background-color:green;
    background-image: url('/images/common/cutecat100x128.png');
    border: 45px dotted darkred;
    padding: 80px;
    margin: 10px;
    height: 550px;
    width: 550px;
    background-repeat: no-repeat;
}

This will render the background image starting from the upper-left corner of the content box.

Important Notes

Here are some important notes and best practices when using the background-origin property:

The background-origin property works in conjunction with the background-position property to determine the final placement of the background image. The padding-box value is the default value if the background-clip property is not set. Consistent use of background-origin can enhance the visual appeal of your design by providing more control over background positioning.

Comparing Background Origin Values

Here is a visual comparison of different background-origin values to help you understand their impact:

Background Origin: Border Box - The background image or color will extend to the outer edge of the border, making it appear as part of the border.
Background Origin: Padding Box - The background image or color will start from the outer edge of the padding, excluding the border, making the background appear within the padding area.
Background Origin: Content Box - The background image or color will only extend to the outer edge of the content, not including the padding or border, making it appear only within the content area.