CSS Backgrounds Background Position
Example
The background-position property is used to specify the starting position for a background image or gradient
.myClass {
background-image: url('path/to/image.jpg');
background-position: 50% 50%;
}
The position is set using an X and Y co-ordinate and be set using any of the units used within CSS.
| Unit | Description |
|---|---|
| value% value% | A percentage for the horizontal offset is relative to (width of background positioning area - width of background image). A percentage for the vertical offset is relative to (height of background positioning area - height of background image) The size of the image is the size given by background-size. |
| valuepx valuepx | Offsets background image by a length given in pixels relative to the top left of the background positioning area |
Units in CSS can be specified by different methods (see here).
Longhand Background Position Properties
In addition to the shorthand property above, one can also use the longhand background properties background-position-x and background-position-y. These allow you to control the x or y positions separately.
NOTE: This is supported in all browsers except Firefox (versions 31-48) 2. Firefox 49, to be released September 2016, will support these properties. Until then, there is a Firefox hack within this Stack Overflow answer.
