css
  1. css-background-origin
PreviousNext

CSS Background Origin

  • The background-origin property in CSS determines where the background image of an element starts, by specifying its origin.
  • This property is often used in combination with the background-size and background-position properties.

Syntax

background-origin: padding-box|border-box|content-box|initial|inherit;
  • padding-box - The background image starts from the padding edge of the element (default).
  • border-box - The background image starts from the border of the element.
  • content-box - The background image starts from the content edge of the element.
  • initial - Sets the property to its default value.
  • inherit - Inherits the property from its parent element.

Example

Here is an example of using the background-origin property:

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                width: 300px;
                height: 200px;
                border: 2px solid black;
                padding: 50px;
                background-image: url("https://static.additionalsheet.com/images//others/snow-hills.jpg");
                background-position: center;
                background-size: cover;
            }

            .p-box {
                background-origin: padding-box;
            }

            .b-box {
                background-origin: border-box;
            }

            .c-box {
                background-origin: content-box;
            }
        </style>
    </head>
    <body>
        <h1>CSS Background Origin Example</h1>
        <div class="p-box">Padding Box</div>
        <div class="b-box">Border Box</div>
        <div class="c-box">Content Box</div>
    </body>
</html>
Try Playground

Explanation

The padding-box value sets the origin of the background image to the padding edge of the element. This means that the image starts from the padding edge and extends to the border edge of the element.

The border-box value sets the origin of the background image to the border of the element. This means that the image starts from the border edge and extends to the padding edge of the element.

The content-box value sets the origin of the background image to the content edge of the element. This means that the image starts from the content edge and does not extend into the padding or border areas.

Use

The background-origin property is useful when you need to adjust the positioning of a background image. It can be used to show or hide the image within the padding or border areas of an element, or to adjust the starting position of the image.

Important Points

  • The background-origin property only affects the positioning of the background image, not the position of the element itself.
  • When using the background-origin property in combination with background-clip, it is important to use compatible values to avoid unexpected results.
  • If the element has no padding or border, it does not matter what value you set for background-origin.

Summary

The background-origin property in CSS is a valuable tool for adjusting the origin of a background image, and is often used in tandem with the background-position and background-size properties to create custom background effects on elements. With its simple syntax and powerful capabilities, it is a must-know for any web developer looking to create beautiful and dynamic web pages.

Background ImageBackground Position
Published on: