Offset the image
background-position
Use this property to reposition the image away from the element's origin.
Property values
Offset the background image a specified amount from its top-left (0,0) origin. Specify two values, one for X and one for Y. Use any of these units or keywords:
| % | Offset a percentage of the elements width and height |
| px | Offset a given number of pixels from the origin |
| top | Offset a given amount from the top of the element |
| bottom | Offset a given amount from the bottom of the element |
| left | Offset a given amount from the left edge of the element |
| right | Offset a given amount from the right edge of the element |
| center | Center the image to the element's centerpoint |
Examples
/* two ways to offset to (100px / 200px) */
background-position: 100px 200px;
background-position: top 100px left 200px;
/* two ways to offset to (15% / 30%) */
background-position: 15% 30%;
background-position: top 15% left 30%;