CSS Reference Property

background-position

If background images have been specified, this property defines their initial position (after any resizing) within their corresponding background positioning area.

The background-position property takes one or more comma-separated <position> values. If multiple background images have been specified, each <position> is applied to a corresponding background image (first <position> for the first image, second <position> for the second image, and so on).

Official Syntax

  • Syntax:

    background-position: <position> [ , <position> ]*
                            
  • Initial: 0% 0%
  • Applies To: all elements
  • Animatable: yes

Values

<position>
Specifies the position of an element inside the background positioning area.

A <position> can be defined by using offset keywords (top, left, bottom, right, and center), or relative <percentage> and <length> offset values.
These values describe the position of the element relative to its container’s edges (top edge and left edge).

Please refer to the <position> entry for more information and a list of possible <position> values.

Examples

The following examples are all valid positions set on a background image of an element:

background-position: 20px; 
background-position: 20px 50px; 
background-position: 30% 75%;
background-position: top left; 
background-position: top 100px; 
background-position: -300px 45px; /* 300px to the left and 45px downwards */
                

The following example specifies the position of two background images applied to an element.

.element {
    background-image: url(path/to/first/image.jpg), url(path/to/second/image.png);
    background-position: top left, 75% 80%;
}
                

Live Demo

The following is a live demo that shows different values for the property:

View this demo on the Codrops Playground

Browser Support

The background-position property is supported in all major browsers: Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.

Notes

Please refer to the <position> entry for more information on browser support for the different <position> syntax options.

Written by

Last updated December 11, 2016 at 9:52 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.