Description
Thebackground-position
property defines the initial position of a background-image. We can repeat the image from this position using the background-repeat property, which will cause the image to be repeated in both directions along the specified axis: see background-repeat.
The background of an element is the area covered by the width and height of that element (whether those dimensions are set explicitly, or the content dictates them); it also includes the area covered by padding and borders. A background-color
(or background-image
) that’s applied to an element will appear beneath the foreground content of that element, and the area covered by the padding and border properties for the element. This coverage area is evident where an element has transparent (or dotted
or dashed
) borders, and the background is seen beneath the borders (or between the dots).
Some area of the element must be visible so that the background-image
is able to show through. If the element has no intrinsic height (defined either by its content or by its dimensions), there will be no space in which the background can be seen. Similarly, if an element contains only floated children that haven’t been cleared—see clear—there will be no background to show, as the element’s height will be zero.
If no background-position
has been specified, the image is placed at the default top-left position of the element (0,0), which is located within the top-left corner of the element, just inside the border at the outside edge of the padding box.
The tiling and positioning of the background-image on inline elements isn’t defined in the CSS2.1 specification, but it might be addressed in future versions.
Example
This style rule places a background-image at a position that’s 100 pixels from the left and 200 pixels from the top of the element with ID “example” :#example{
background-position: 100px 200px;
}
This property accepts one or two length values, percentages, or keywords.
If only one value is specified for background-position
, the second value is assumed to be center
. Where two values are used, and at least one is not a keyword, the first value represents the horizontal position, and the second represents the vertical position.
A length value places the top-left corner of the background-image at the exact horizontal and vertical position specified.
Note that when the background-position
is defined with a percentage value, that position refers to both the element itself and the corresponding point on the background-image
. For example, a background-image
with background-position values of 50% 50%
will place the point of the image that’s located at 50% of the image’s width and 50% of the image’s height at a corresponding position within the element that contains the image. In the above case, this causes the image to be perfectly centered. This is an important point to grasp—using background-position
isn’t the same as placing an element with absolute position using percentages where the top-left corner of the element is placed at the position specified.
Frequently Asked Questions about CSS Background Position
How can I set the background position in CSS using percentages?
In CSS, you can use percentages to set the background position. This method allows you to position the background image relative to the container’s dimensions. For instance, if you use ‘background-position: 50% 50%;’, the background image will be centered both vertically and horizontally. The first value sets the horizontal position (left to right), and the second value sets the vertical position (top to bottom).
What is the difference between ‘background-position: center’ and ‘background-position: 50% 50%’?
Both ‘background-position: center’ and ‘background-position: 50% 50%’ will center the background image. However, the difference lies in how they handle the image when it’s larger than the container. ‘background-position: center’ will center the image and crop the excess, while ‘background-position: 50% 50%’ will resize the image to fit the container, potentially distorting the image.
How can I position a background image to the bottom right corner of the container?
To position a background image to the bottom right corner of the container, you can use the ‘background-position’ property with the values ‘right bottom’. For example, ‘background-position: right bottom;’. This will align the image to the bottom right corner of the container.
Can I use pixel values to set the background position in CSS?
Yes, you can use pixel values to set the background position in CSS. For example, ‘background-position: 10px 20px;’ will position the background image 10 pixels from the left and 20 pixels from the top of the container.
How does the ‘background-position’ property work with repeated background images?
When you use the ‘background-position’ property with repeated background images, it sets the starting position of the image pattern. For instance, if you use ‘background-position: 50px 50px;’, the image pattern will start 50 pixels from the left and 50 pixels from the top of the container.
Can I use the ‘background-position’ property with multiple background images?
Yes, you can use the ‘background-position’ property with multiple background images. You can specify the position for each image, separated by commas. For example, ‘background-position: 0% 0%, 50% 50%;’ will position the first image at the top left corner and the second image at the center of the container.
What happens if I only specify one value for the ‘background-position’ property?
If you only specify one value for the ‘background-position’ property, the second value will default to ‘center’. For example, ‘background-position: right;’ is equivalent to ‘background-position: right center;’.
How can I use the ‘background-position’ property to create a parallax effect?
To create a parallax effect, you can use the ‘background-position’ property in combination with the ‘background-attachment’ property set to ‘fixed’. This will make the background image scroll at a different speed than the rest of the page, creating a sense of depth.
Can I use negative values for the ‘background-position’ property?
Yes, you can use negative values for the ‘background-position’ property. This will position the background image outside the container’s boundaries. For example, ‘background-position: -10px -20px;’ will position the image 10 pixels to the left and 20 pixels above the top edge of the container.
How does the ‘background-position’ property work with background-size: cover?
When you use ‘background-position’ with ‘background-size: cover’, the position is relative to the size of the image after it has been resized to cover the container. For example, ‘background-position: 50% 50%;’ will center the image after it has been resized, not based on its original size.
Adam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.