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, andcenter), 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 PlaygroundBrowser 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.
