Наши волонтёры ещё не перевели данную статью на Русский. Присоединяйтесь к нам и помогите сделать эту работу!
Вы можете также прочитать эту статью на English (US).

The background-origin CSS property sets the background positioning area, i.e., the origin position of an image specified using the background-image property.

Note that background-origin is ignored when background-attachment is fixed.

Note: The background shorthand resets the value of this property to its initial value if it's left unspecified.


/* Keyword values */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

/* Global values */
background-origin: inherit;
background-origin: initial;
background-origin: unset;

The background-origin property is specified as one of the keyword values listed below.


The background is positioned relative to the border box.
The background is positioned relative to the padding box.
The background is positioned relative to the content box.

Formal syntax


<box> = border-box | padding-box | content-box


.example {
  border: 10px double;
  padding: 10px;
  background: url('image.jpg');
  background-position: center left;
  background-origin: content-box;
#example2 {
  border: 4px solid black;
  padding: 10px;
  background: url('image.gif');
  background-repeat: no-repeat;
  background-origin: border-box;
div {
  background-image: url('logo.jpg'), url('mainback.png'); /* Applies two images to the background */
  background-position: top right, 0px 0px;
  background-origin: content-box, padding-box;


Specification Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'background-origin' in that specification.
Candidate Recommendation Initial definition.

Initial valuepadding-box
Applies toall elements. It also applies to ::first-letter and ::first-line.
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support111242 39410.531
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support4.1 Yes Yes1412.1 Yes Yes
content-box4.1 Yes Yes1412.1 Yes Yes

1. Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.

2. Firefox supported, from version 1 to 3.6 included, a different and prefixed syntax: -moz-background-clip: padding | border.

3. Since Firefox 49, also supports the -webkit prefixed version of the property.

4. In IE 7 and before, Internet explorer was behaving as if background-origin: border-box was set. In Internet Explorer 8, as if background-origin: padding-box, the regular default value, was set.

5. In IE 7 and IE 9 of Internet Explorer, it always behaved like background-clip: padding if overflow: hidden | auto | scroll.

See also

Метки документа и участники

Обновлялась последний раз: mfuji09,