CSS background-origin Property

The background-origin property sets the coordinate system for a background image, determining exactly where the image starts its positioning within the element box model.

selector { background-origin: value; }
padding-box The background is positioned relative to the padding edge, which is the default behavior.
border-box The background is positioned relative to the border edge, allowing it to extend behind the border.
content-box The background is positioned relative to the content edge, staying strictly inside the padding area.

Code Examples

A basic example showing a background image starting inside the content area, ignoring the 30px padding.

<div style="width: 300px; height: 150px; border: 20px solid rgba(0,0,0,0.2); padding: 30px; background-image: url('https://www.adamkhoury.com/images/logo.png'); background-repeat: no-repeat; background-origin: content-box; background-color: #f0f0f0;">
  The background image starts exactly where this text starts because of content-box.
</div>

An advanced example using JavaScript to toggle the origin between the padding edge and the border edge to show how the image shifts.

<div id="ui_box" style="width: 300px; height: 200px; border: 15px dashed #333333; padding: 25px; background: url('https://via.placeholder.com/100') no-repeat #eeeeee; background-origin: padding-box;">
  <p>Origin: <span id="status">padding-box</span></p>
  <button onclick="toggleOrigin()">Toggle Origin</button>
</div>

<script>
function toggleOrigin() {
  const el = document.getElementById("ui_box");
  const status = document.getElementById("status");
  if (el.style.backgroundOrigin === "padding-box") {
    el.style.backgroundOrigin = "border-box";
    status.innerText = "border-box";
  } else {
    el.style.backgroundOrigin = "padding-box";
    status.innerText = "padding-box";
  }
}
</script>

Pro Tip

If you are building a custom button with an icon on the left, set background-origin to content-box. This ensures the icon stays perfectly aligned with your text regardless of how much padding you add to the button to make it 'chunkier' for mobile users.

Deep Dive

Think of an element like a framed photo. The frame is the border, the white matting inside the frame is the padding, and the photo itself is the content. By default, CSS puts the top-left corner of your background image at the start of the matting (padding-box). If you change this to border-box, the image moves out to the very edge of the frame. If you set it to content-box, the image moves inward to only sit where the photo is. It is important to note that this property controls the 'origin' or starting point of the background-position property. If you have background-repeat set to repeat, the image will fill the entire area, but its starting 'anchor' point is still dictated by the origin you choose.

Best Practices

Use content-box when you want an icon or specific graphic to stay perfectly clear of your padding without having to manually calculate pixel offsets. Use border-box when you have a semi-transparent or dashed border and you want the background image to be visible underneath that border for a layered design effect.

Common Pitfalls

This property has zero effect if background-attachment is set to fixed. Also, do not confuse background-origin with background-clip. While origin determines where the image 'starts', clip determines where the image is 'cut off'. If you want an image to start at the content but bleed into the padding, you would adjust origin and clip differently.

Accessibility

Background images are decorative. Never place critical text or instructions within a background image unless you provide the same information as accessible text for screen readers. Ensure that the background image does not reduce the contrast ratio of the text sitting on top of it, regardless of which origin box you use.

Dev Data Table: background-origin property

default padding-box
animatable no
inherited no
experimental no
year_intro 2002
year_standard 2011
js_syntax_1 element.style.backgroundOrigin = "content-box";
js_syntax_2 element.style.setProperty("background-origin", "content-box");
js_note When using JavaScript to toggle this, ensure a background image is already applied to the element or you will see no visual change.
browsers { "Chrome": 1, "Edge": 12, "Firefox": 4, "Safari": 3, "Opera": 10.5, "Chrome Android": 18, "Safari on iOS": 3.2, "Samsung Internet": 1, "Opera Mobile": 11 }
results render here...