W3cubDocs

/CSS

background-origin

The background-origin CSS property sets the background positioning area. In other words, it sets the origin position of an image set with 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.

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 value	`padding-box`
Applies to	all elements. It also applies to `::first-letter` and `::first-line`.
Inherited	no
Media	visual
Computed value	as specified
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

Browser compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	1 1 Yes Prefixed Prefixed Requires the vendor prefix: -webkit- 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`.	12	4 4 49 Prefixed Prefixed Requires the vendor prefix: -webkit- 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`. 1 — 4 Prefixed Prefixed Requires 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 Prefixed Prefixed Requires the vendor prefix: -webkit- 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`.	3 3 Yes Prefixed Prefixed Requires the vendor prefix: -webkit- 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`.
`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	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	4.1 4.1 Yes Prefixed Prefixed Requires the vendor prefix: -webkit- 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`.	Yes Yes Yes Prefixed Prefixed Requires the vendor prefix: -webkit- 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`.	Yes	14 14 49 Prefixed Prefixed Requires the vendor prefix: -webkit- 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`.	12.1 12.1 14 Prefixed Prefixed Requires the vendor prefix: -webkit- 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`.	Yes Yes Yes Prefixed Prefixed Requires the vendor prefix: -webkit- 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`.	Yes
`content-box`	4.1	Yes	Yes	14	12.1	Yes	Yes