CssHow-ToBeginner · 3 min read

How to Use background-origin in CSS: Simple Guide

The background-origin CSS property sets the starting position of a background image relative to the element's box. You can choose between border-box, padding-box, and content-box to control if the background starts from the border edge, padding edge, or content edge respectively.

📐

Syntax

The background-origin property accepts three main values:

border-box: The background starts from the outer edge of the border.
padding-box: The background starts from the edge of the padding, inside the border.
content-box: The background starts from the content area, inside the padding.

css

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

💻

Example

This example shows how the background image position changes when using different background-origin values on the same element.

css

html {
  font-family: Arial, sans-serif;
}

.box {
  width: 200px;
  height: 100px;
  border: 10px solid #333;
  padding: 20px;
  margin-bottom: 20px;
  background-image: url('https://via.placeholder.com/150');
  background-repeat: no-repeat;
  background-position: top left;
}

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

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

.content-box {
  background-origin: content-box;
}

Output

<div class="box border-box">background-origin: border-box</div><div class="box padding-box">background-origin: padding-box</div><div class="box content-box">background-origin: content-box</div>

⚠️

Common Pitfalls

One common mistake is confusing background-origin with background-clip. background-origin controls where the background image starts, while background-clip controls where the background is visible.

Also, if you don't set background-position, the image might not appear as expected when changing background-origin.

css

/* Wrong: background-clip used instead of background-origin */
.box-wrong {
  background-image: url('https://via.placeholder.com/150');
  background-clip: padding-box;
  background-position: top left;
  border: 10px solid #333;
  padding: 20px;
  width: 200px;
  height: 100px;
}

/* Right: background-origin used correctly */
.box-right {
  background-image: url('https://via.placeholder.com/150');
  background-origin: padding-box;
  background-position: top left;
  border: 10px solid #333;
  padding: 20px;
  width: 200px;
  height: 100px;
}

Output

<div class="box-wrong">Wrong: background-clip used</div><div class="box-right">Right: background-origin used</div>

📊

Quick Reference

Value	Description
border-box	Background starts from the border edge.
padding-box	Background starts from the padding edge.
content-box	Background starts from the content edge.

✅

Key Takeaways

Use background-origin to control where the background image starts inside an element.

Choose between border-box, padding-box, and content-box based on your layout needs.

Remember background-origin is different from background-clip.

Set background-position to control the exact placement of the background image.

Test visually to see how padding and borders affect your background image placement.