background-origin

Table of contents

  1. 1. Summary
  2. 2. Syntax
  3. 3. Values
  4. 4. Examples
  5. 5. Specifications
  6. 6. Browser compatibility
  7. 7. See also
Page Notifications Off

« CSS « CSS Reference

Summary

The background-origin CSS property determines the background positioning area, that is the position of the origin of an image specified using the background-image CSS property.

Note that background-origin is ignored when background-attachment is fixed.

If the value of this property is not set in a background shorthand property that is applied to the element after the background-origin CSS property, the value of this property is then reset to its initial value by the shorthand property.

Syntax

background-origin: [padding-box | border-box | content-box][, [border-box | padding-box | content-box]]*

Values

border-box
The background extends to the outside edge of the border (but underneath the border in z-ordering).
padding-box
No background is drawn below the border (background extends to the outside edge of the padding).
content-box
The background is painted within (clipped to) the content box.

Examples

 .example {
   border: 10px double;
   padding: 10px;
   background: url('image.jpg');
   background-position: center left;
   /* The background will be inside the padding */       
   background-origin: content-box;
}

div {
  background-image: url('mainback.png'), url('logo.jpg');
  background-position: 0px 0px, top right;
  background-origin: padding-box, content-box;
}

Specifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 3 Candidate Recommendation  

Browser compatibility

  • Desktop
  • Mobile

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 [3] 4.0 (2.0) [1] 9.0 [2] 10.5 3.0 (522) [3]
content-box 1.0 [3] 4.0 (2.0) [1] 9.0 [2] -- 3.0 (522) [3]
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? ?
content-box ? ? ? ? ?

[1] Gecko supported, from version 1.1 to version 1.9.2, which corresponds to Firefox 1.0 to 3.6 included, a different, and prefixed, syntax: -moz-background-origin: padding | border.

[2] Internet Explorer up to version 7 behaves as if there was a background-origin: border-box; Internet Explorer 8 behaves as if it were background-origin: padding-box; which is the regular default value.

[3] Webkit also supports the prefixed version of this proprietary, and in that case, in addition to the current keywords, the alternative synonyms: padding, border, and content.

[4] Konqueror 3.5.4 supports -khtml-background-origin.

Tags (3)

Edit tags

Attachments (0)

 

Attach file