background-origin

You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!

The background-origin CSS property sets the background's origin: from the border start, inside the border, or inside the padding.

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.

Syntax

/* 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.

Values

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

Formal syntax

<box>#

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

Examples

.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;
}

Specifications

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.
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
background-originChrome Full support 1
Full support 1
No support 1 — 64
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Chrome accepts alternate synonyms to its values: padding, border, and content.
Edge Full support 12Firefox Full support 4
Full support 4
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 1 — 4
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes Used the -moz-background-clip: padding | border syntax.
IE Full support 9
Notes
Full support 9
Notes
Notes 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.
Opera Full support 10.5
Full support 10.5
No support 15 — 51
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Opera accepts alternate synonyms to its values: padding, border, and content.
Safari Full support 3
Full support 3
Full support 3
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Webkit accepts alternate synonyms to its values: padding, border, and content.
WebView Android Full support 4.1
Full support 4.1
No support 4.1 — 64
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes WebView accepts alternate synonyms to its values: padding, border, and content.
Chrome Android Full support 18
Full support 18
No support 18 — 64
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Chrome accepts alternate synonyms to its values: padding, border, and content.
Firefox Android Full support 14
Full support 14
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Opera Android Full support 11
Full support 11
No support 14 — 47
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Opera accepts alternate synonyms to its values: padding, border, and content.
Safari iOS Full support 1
Full support 1
Full support 1
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Webkit accepts alternate synonyms to its values: padding, border, and content.
Samsung Internet Android Full support 1.0
content-boxChrome Full support 1Edge Full support 12Firefox Full support 4IE Full support 9
Notes
Full support 9
Notes
Notes In IE 7 and IE 9 of Internet Explorer, it always behaved like background-clip: padding if overflow: hidden | auto | scroll.
Opera Full support 10.5Safari Full support 3WebView Android Full support 4.1Chrome Android Full support 18Firefox Android Full support 14Opera Android Full support 11Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also