CSS background-origin

Specifies the background positioning area of a background.

Syntax

Note: If the background-attachment is fixed, then background-origin will be ignored.

background-origin: <value>;

Copy to clipboard
Copy to clipboard

where <value> can be one of the following:

• content-box: Relative positioning to the content box.
• padding-box: Relative positioning to the padding box.
• border-box: Relative positioning to the border box.
• Global values: inherit, initial, revert, unset

Example 1

Set background positioning to the edge of the content box:

.main {
  border: 5px dashed #4d4d4d;
  padding: 1rem;
  background: url(images/background-origin.jpg) no-repeat;
  background-origin: content-box;
}

Copy to clipboard
Copy to clipboard

The resulting output of the code block above is:

Example 2

Set background positioning to the inside edge of the border, respecting its padding:

.main {
  border: 5px dashed #4d4d4d;
  padding: 1rem;
  background: url(images/background-origin.jpg) no-repeat;
  background-origin: padding-box;
}

Copy to clipboard
Copy to clipboard

The resulting output of the code block above is:

Example 3

Set background positioning to the edge of the border:

.main {
  border: 5px dashed #4d4d4d;
  padding: 1rem;
  background: url(images/background-origin.jpg) no-repeat;
  background-origin: border-box;
}

Copy to clipboard
Copy to clipboard

The resulting output of the code block above is: