CSS Reference
CSS Reference CSS Selectors CSS Reference Aural CSS Web Safe Fonts CSS Units CSS Colors CSS Color Values CSS Color Names CSS Color HEX CSS3 Browser SupportCSS Properties
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;
}
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}
Try it yourself »
Browser Support
The background-origin property is supported in IE9+, Firefox 4+, Opera, Chrome, and Safari 5+.
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 |
| Version: | CSS3 |
| JavaScript syntax: | object.style.backgroundOrigin="content-box" |
Syntax
background-origin: padding-box|border-box|content-box;
| Value | Description | Play it |
|---|---|---|
| padding-box | 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 » |
Related Pages
CSS3 tutorial: CSS3 Backgrounds
Your suggestion:
Close [X]
Thank You For Helping Us!
Your message has been sent to W3Schools.
Close [X]
