In this section, we will learn what the background-origin property is and how to use it in CSS.

CSS background-origin Property Definition and Usage

When using an image for the background of an element, by default, the starting position of that image is the upper-left corner of the padding of the element. Then from that position, it repeats itself until the entire background space is filled with that image (of course if the background-repeat is set to repeat).

But CSS provides a property named `background-origin` by which we can change the starting position (origin) of a background image.

CSS background-origin Property Syntax

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

CSS background-origin Property Value

Here are the values that we can set for this property:

• border-box: using this value, the origin of a background image will be “upper-left” of the element’s border
• padding-box: using this value, the origin of a background image will be “upper-left” of the element’s pad.
• content-box: using this value, the origin of a background image will be “upper-left” of the element’s content.

Note: the two global values “initial” and “inherit” can also be used for `background-origin` property.

Sample:

Click here to run the example.

Note: in the sample above, we had to use `background-clip` property as well in order to show a clear result when using specified values for `background-origin`.

Here’s the same sample without using `background-clip` property:

Click here to run the example.

Example: background-origin property in CSS

See the Pen background-origin property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.