Webzstore
The CSS 'background-position' property sets the initial position of a background image. By defining the starting point of the image relative to the element it's applied to, this property allows for precise control over the placement of background images. It's particularly useful for aligning images in a specific part of the element, ensuring that the most important part of the image is visible, or for creating effects with multiple background images.
CSS 'background-position' Property Examples
See the Pen CSS 'background-position' Property by Webzstore (@webzstore) on CodePen.
The 'background-position' property is a powerful tool for customizing the appearance of elements with background images. It provides detailed control over how and where those images are displayed within the element's box.
Browser Support For 'background-position' Property
| Browser | Version | Released |
|---|---|---|
| Chrome | 1 | Dec 2008 |
| Edge | 12 | Jul 2015 |
| Firefox | 1 | Nov 2004 |
| Safari | 1 | Jun 2003 |
| Opera | 3.5 | Nov 1998 |
Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for background-position for the full compatibility details, including mobile browsers.
CSS Syntax of the 'background-position' Property
background-position: position-value | initial | inherit;
Usage of the 'background-position' Property
Use 'background-position' when you need to align background images within an element in a specific way. This can range from centering an image, aligning it to one side, or even positioning it at a particular pixel or percentage point for precise control. The property is invaluable for responsive design, allowing background images to remain relevant across different screen sizes and orientations.
Property Values of the 'background-position' Property
- Position-value: Can be defined using keywords (top, right, bottom, left, center), percentages, or exact coordinates (like 10px 20px). Keywords can be combined (like top left or center bottom), and percentages or coordinates set the position relative to the element's dimensions.
- Initial: Sets the 'background-position' to its default value (0% 0%), which places the background image at the top left of the element.
- Inherit: Inherits the 'background-position' from the element's parent.
