CSS background-origin Property

CSS background-origin Property

The background-origin property in CSS determines the starting position (origin) of a background image relative to the element’s box model. It controls whether the background starts from the padding-box, border-box, or content-box.

1. Syntax

selector {
  background-origin: value;
}

🚀 Note: The background-origin property works only when background-attachment is scroll (default).

2. Accepted Values

Value	Description
padding-box (default)	The background starts from the inside edge of the padding (excludes border).
border-box	The background starts from the outside edge of the border.
content-box	The background starts from the inside edge of the content area, ignoring padding & border.

3. Example – Using background-origin: padding-box; (Default)

.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 10px solid black;
  background-image: url("image.jpg");
  background-origin: padding-box;
  background-repeat: no-repeat;
}

✅ The background starts from the padding area, not covering the border.

4. Example – Using background-origin: border-box;

.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 10px solid black;
  background-image: url("image.jpg");
  background-origin: border-box;
  background-repeat: no-repeat;
}

✅ The background covers the border area.

5. Example – Using background-origin: content-box;

.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 10px solid black;
  background-image: url("image.jpg");
  background-origin: content-box;
  background-repeat: no-repeat;
}

✅ The background starts only inside the content area, ignoring padding & border.

6. Best Practices

✔ Use padding-box (default) for most layouts to keep the background within the element without overlapping the border.
✔ Use border-box if you want the background to include the border area.
✔ Use content-box for minimal backgrounds limited to the content area.