W3cubDocs

/CSS

background-origin

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.

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 definition

Initial value padding-box
Applies to all elements. It also applies to ::first-letter and ::first-line.
Inherited no
Computed value as specified
Animation type discrete

Formal syntax

<box>#

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

Examples

Setting background origins

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

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
background-origin 1
1
1 — 64
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome accepts alternate synonyms to its values: padding, border, and content.
12 4
4
49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
1 — 4
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Used the -moz-background-clip: padding | border syntax.
9
9
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.
10.5
10.5
15 — 51
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Opera accepts alternate synonyms to its values: padding, border, and content.
3
3
3
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Webkit accepts alternate synonyms to its values: padding, border, and content.
content-box 1 12 4 9
9
In IE 7 and IE 9 of Internet Explorer, it always behaved like background-clip: padding if overflow: hidden | auto | scroll.
10.5 3
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
background-origin 4.1
4.1
4.1 — 64
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView accepts alternate synonyms to its values: padding, border, and content.
18
18
18 — 64
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome accepts alternate synonyms to its values: padding, border, and content.
14
14
49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
11
11
14 — 47
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Opera accepts alternate synonyms to its values: padding, border, and content.
1
1
1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Webkit accepts alternate synonyms to its values: padding, border, and content.
1.0
1.0
1.0 — 9.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome accepts alternate synonyms to its values: padding, border, and content.
content-box 4.1 18 14 11 1 1.0

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin