Positioned CSS Background Images
Some popular uses of CSS Background images positioning comes when designing online stationery. You may want an image to form a backdrop over your text and not necessarily be positioned on the top left of the canvass.
Another use would be for menu button effects where you can position an image based on whether it is the first menu item or the last menu item or center menu items like when you want the first menu item to have rounded left edges and the right menu item to have right rounded edges then you would need to position the image likewise.
The CSS background image code that handles positioning is as follows:
In the above CSS Background image code snippet, I have used “center" as the example. Other properties are, left top, left center, left bottom, right top, right center, right bottom, center top, center center and center bottom. You can also use absolute coordinates to further control the CSS background image positioning, for example,
Position on the top right of the web page use:
background-position: right top;
Position the CSS background image in an absolute place use:
background-position: 200px 300px;
Where 200px is the offset from the left and 300px is offset from the top.
This positioning with absolute values can be used to produce effects like toggle buttons. Background Positioning is also popular for using with rating stars, where for example you could have the different ratings lined up vertically. then changing a rating would simply change the "y" offset of the image within the container.