background-position

SummaryEdit

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

SyntaxEdit

/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* <percentage> values */
background-position: 25% 75%;

/* <length> values */
background-position: 0px 0px;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Multiple values */
background-position: 0px 0px, center;

/* Global values */
background-position: inherit;
background-position: initial;
background-position: unset;

Values

<position>

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

<position>#

ExamplesEdit

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://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
}
.exampletwo {
    background: url("https://mdn.mozillademos.org/files/11987/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://mdn.mozillademos.org/files/11987/startransparent.gif"), 
                         url("https://mdn.mozillademos.org/files/7693/catfront.png");
    background-position: 0px 0px,
                         center;
}

Output

SpecificationsEdit

Browser compatibilityEdit

See alsoEdit

• Multiple backgrounds