THE WORLD'S LARGEST WEB DEVELOPER SITE

CSS3 background-origin Property


Example

Let the background image start from the upper left corner of the content:

#example1 {
    background:url(img_flwr.gif);
    background-repeat: no-repeat;
    padding:35px;
    background-origin: content-box;
}

Try it yourself »

Definition and Usage

The background-origin property specifies where the background image is positioned.

Note: If the background-attachment property is set to "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 starts from the upper left corner of the padding edge Play it »
border-box The background image starts from the upper left corner of the border Play it »
content-box The background image starts from the upper left corner of the content 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



COLOR PICKER

colorpicker

SHARE THIS PAGE






Search w3schools.com:

Translate w3schools.com: