Style backgroundOrigin attribute

Definition and usage

backgroundOrigin This attribute specifies the position of the background-position attribute relative to what.

Note:If the background-image's background-attachment property is "fixed"then this property has no effect.

Example

Position the background image relative to the content box:

document.getElementById("myDIV").style.backgroundOrigin = "content-box";

Try it yourself

Syntax

Return the backgroundOrigin property:

object.style.backgroundOrigin

Set the backgroundOrigin property:

object.style.backgroundOrigin = "padding-box|border-box|content-box|initial|inherit"

Attribute value

Value Description
padding-box Default value. The background image is positioned relative to the padding box.
border-box The background image is positioned relative to the border box.
content-box The background image is positioned relative to the content box.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical details

Default value: padding-box
Return value: A string that represents the background-origin property.
CSS version: CSS3

Browser support

backgroundOrigin is a CSS3 (1999) feature.

All browsers fully support it:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Support Support Support Support Support 11

Related pages

CSS reference manual:background-origin property