Style backgroundOrigin attribute

Definition and usage

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

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 Attribute.
CSS Version: CSS3

Browser support

backgroundOrigin It 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 Attribute