Position using fix or flexible values:
- Start from left image edge, then from top image edge.
- Count the distance from left to the start of the part to show (e.g. 75px), then from top down to the top of that part (e.g. 50px). - Pull the image leftwards and upwards by negative values.
background-position: -75px -50px;
In a large area you maybe wish to place a small image somewhere therein. In that case push the image with positive values.
Percent value positions the percentage value's point of the image into the percentage value's point of the background area.
Examples using an 1000px wide and 100px high image in a background area of 800px width and 80px height:
0% 0% values aligns left and top edges of the image with the area left and top edges.
50% 0% values positions the horizontal centre of the image in the horizontal centre of the area, and the image top edge aligned with the area top edge.
75% 25% values positions the left-right 750th pixel of the image into the left-right 600ed pixel of the area. Respectively 25px from the image top at 20px from the area top. (That is pulled left by -150px and pulled up by -5px.)
100% 100% values aligns 1000px from left (=right edge) and 100px from top (=bottom edge) image points, with from left 800px (=right edge) and from top 80px (=bottom edge) of the area.
Extreme percentage values are possible too.
0% 110% values pulls the image up leaving a 20px gap at the bottom of the area.
20 minutes beaten by the master.