Background-origin - CSS Property
Summary of characteristics of the background-origin property
padding-box | border-box | content-boxpadding-boxRepeatable list.Syntax diagram of background-origin.
background-origin property.The links in the diagram provide more details about the values.
Download the diagram in SVG.
In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:
- In the case of multiple backgrounds, several values are listed separated by a comma.
Description of the background-origin property.
background-origin defines the reference for positioning the background image.
The property background-position positions the background image based on this reference.
This does not prevent the background from extending beyond this reference.
To limit the background to a certain area of the element, refer to the property background-clip.
background-origin is ineffective if the property background-attachment has the value fixed.
For a general presentation of backgrounds in CSS, refer to the page background.
Values for background-origin.
- background-origin: padding-box; background-origin: border-box; background-origin: content-box;
padding-boxis the default value. Each of these values corresponds to a point that will serve as a reference for positioning the background with the propertybackground-position.
- background-origin: border-box, border-box, ...;
In the case of multiple backgrounds, several values can be provided for
background-originby separating them with a comma.
For more information on multiple backgrounds, refer to the page Multiple backgrounds. - background-origin: initial; (
padding-box) background-origin: inherit; background-origin: revert; background-origin: revert-layer; background-origin: revert-rule; background-origin: unset;See the following pages for more details:
initial,inherit,revert,revert-layer,revert-rule,unset.
Access the background-origin property via a program
Change the value of background-origin in Javascript.
In JavaScript, depending on the chosen syntax, the property name can be written in kebab-case (a dash between words) or in camel-case
(an uppercase letter to separate words). The value, however, must always be written according to the CSS syntax, that is to say in kebab-case.
let el = document.getElementById('id');
el.style['background-origin'] = 'border-box';
// or
let el = document.getElementById('id');
el.style.backgroundOrigin = 'border-box';
Read in Javascript the value of background-origin.
The code below works when the property has been directly assigned to the element itself, via the style attribute of the HTML,
and not by using a CSS selector.
let el = document.getElementById('id');
let value = el.style['background-origin'];
// or
let el = document.getElementById('id');
let value = el.style.backgroundOrigin;
Read the computed value of background-origin in Javascript.
The computed value is the one resulting from the evaluation of the inheritance cascade and the resolution of any conflicts (see the Priorities).
The computed value can therefore be the value assigned to the element via the style attribute of the HTML, a value assigned via a CSS selector,
an inherited value, or if not, the initial value of the property: padding-box in the case of background-origin.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('background-origin');
Modify the value of the property background-origin with jQuery.
The name of the property can be written interchangeably in kebab-case notation or in camel-case notation.
$('#id').css('background-origin', 'border-box');
// or
$('#id').css('backgroundOrigin', 'border-box');
Read the computed value of the property background-origin with JQuery.
let value = $('#id').css('background-origin');
Test it yourself.
The buttons below apply the entered value to the property background-origin and then display either the value as it was applied or the computed value.
Simulator.
The simulator applies the chosen value to the two elements below. For the first, the background image is not repeated; for the second, it is.
Browsers compatibility with background-origin.
The property background-origin does not have any compatibility issues with current browsers.
background-origin property that defines the reference for background-position.background-originproperty
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
KaiOS Browser
Opéra Mobile
Chrome
Edge
Opéra
Safari
Safari sur IOS
Androïd Brower
Chrome pour Androïd
Firefox pour Androïd
Samsung Internet
Firefox
Baidu Browser
QQ Browser
UC Browser pour Androïd
Opéra mini
Historic of the background-origin property.
-
CSS Backgrounds and Borders Module Level 3
Level 3 of the specification also explains how to position the background relative to the background area, and how to crop it.
Regarding borders, the concept of image borders is introduced, as well as the ideas of rounded corners and box shadows.Regardingbackground-originFirst definition of thebackground-originproperty.
August 02, 2002Working Draft.
December 17, 2009Candidate Recommendation.
-
CSS Backgrounds and Borders Module Level 4
Level 4 of the specification introduces logical values that depend on the writing mode.
Regardingbackground-originNo change regarding thebackground-originproperty.November 25, 2025Working Draft.
See also, regarding the backgrounds.
Everything concerning backgrounds and borders is described in the specification of W3C CSS Backgrounds and Borders Module. Here is the list of the main properties described in this standard.
Properties:
