Your Search Results

    -webkit-background-origin Redirect 1

    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

    Formal syntax: <box>#
    background-origin: border-box
    background-origin: padding-box
    background-origin: content-box
    
    background-origin: inherit
    

    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('logo.jpg'), url('mainback.png');
      background-position: top right, 0px 0px;
      background-origin: content-box, padding-box;
    }

    Specifications

    Specification Status Comment
    CSS Backgrounds and Borders Module Level 3
    The definition of 'background-origin' in that specification.
    Candidate Recommendation  

    Browser compatibility

    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] Not supported 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.

    See also

    Document Tags and Contributors

    Contributors to this page: Sheppy
    Last updated by: Sheppy,
    Hide Sidebar