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%;
background-position

style > background > background-positionOffset the image

🔎