Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

Your Search Results


    This article is in need of an editorial review.


    The background-position CSS property sets the initial position, relative to the background position layer defined by background-origin for each defined background image.

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

    • Initial value 0% 0%
    • Applies to all elements. It also applies to ::first-letter and ::first-line.
    • Inherited no
    • Percentages refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets
    • Media visual
    • Computed value a list, each item consisting of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage
    • Animatable yes, as a repeatable list of a simple list of a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
    • Canonical order the unique non-ambiguous order defined by the formal grammar


    background-position: top;
    background-position: bottom;
    background-position: left;
    background-position: right;
    background-position: center;
    background-position: 25% 75%;
    background-position: 0px 0px, center;


    Is a <position>, that is one to four values representing a 2D position regarding the edges of the element's box. Relative or absolute offsets can be given. Note that the position can be set outside of the element's box.

    Formal syntax



    Demo page with basic examples

    View the live example

    Examples using CSS background and multiple images

    There should be three yellow elements, each with a star in a different position. The final rectangle has two background images, each with a different background-position.

    HTML Content

    <div class="exampleone">Example One</div>
    <div class="exampletwo">Example Two</div>
    <div class="examplethree">Example Three</div>

    CSS Content

    /* Shared among all DIVS */
    div {
        background-color: #FFEE99;
        background-repeat: no-repeat;
        width: 300px;
        height: 80px;
        margin-bottom: 12px;
    /* background-position examples */
    /* These examples use the background shorthand CSS property */
    .exampleone {
        background: url("https://developer.mozilla.org/samples/cssref/images/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
    .exampletwo {
        background: url("https://developer.mozilla.org/samples/cssref/images/startransparent.gif") #FFEE99 3em 50% no-repeat;
    Multiple background images: Each image is matched with the
    corresponding position style, from first specified to last.
    .examplethree {
        background-image:    url("https://developer.mozilla.org/samples/cssref/images/startransparent.gif"), 
        background-position: 0px 0px,



    Specification Status Comment
    CSS Backgrounds and Borders Module Level 3
    The definition of 'background-position' in that specification.
    Candidate Recommendation Added support for multiple backgrounds, the four-value syntax and modified the percentage definition to match implementations.
    CSS Level 2 (Revision 1)
    The definition of 'background-position' in that specification.
    Recommendation Allows for the mix of keyword values and <length> and <percentage> values.
    CSS Level 1
    The definition of 'background-position' in that specification.

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 1.0 1.0 (1.7 or earlier) 4.0 3.5 1.0 (85)
    Multiple backgrounds 1.0 3.6 (1.9.2) 9.0 10.5 1.3 (312)
    Four-value syntax (support for offsets from any edge) 25 (maybe earlier) 13.0 (13.0) 9.0 10.5 7.0
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support (Yes) 1.0 (1) (Yes) (Yes) (Yes)
    Multiple backgrounds ? 1.0 (1.9.2) ? ? ?
    Four-value syntax (support for offsets from any edge) Not supported 13.0 (13.0) ? ? iOS 7.0

    See also