CSS3 background-origin Property


Example

Position the background image relative to the content box:

div {
    background-image: url('smiley.gif');
    background-repeat: no-repeat;
    background-position: left;
    background-origin: content-box;
}

Try it yourself »

Definition and Usage

The background-origin property specifies what the background-position property should be relative to.

Note: If the background-attachment property for the background image is "fixed", this property has no effect.

Default value: padding-box
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.backgroundOrigin="content-box" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
background-origin 4.0 9.0 4.0 3.0  10.5

CSS Syntax

background-origin: padding-box|border-box|content-box|initial|inherit;

Property Values

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

Related Pages

CSS3 tutorial: CSS3 Backgrounds

HTML DOM reference: backgroundOrigin property



SHARE THIS PAGE

COLOR PICKER

colorpicker