Background Position is also one of the images related property in the css its used to place the image in the correct particular location. Example you want to display the any small image in the small box or in button we can use the background position property to display the image in perfect manner.
This Background-position option is very use full in the sprite image. A set of image can be grouped into the single image and you can display the particular single image from the set of image we can use this property to display the image.
Example Image Below:
In the above image I will display the particular basket image from that big size image.We can selectively Display that particular image from that big size image using this property background-position.
Syntax for the Background Position:
.sprite {
background: url('img/Icon_Set.png') no-repeat -118px -122px;
width: 50px;
height: 50px;
}Here See the Example Image:
Code for the Above Image:
Html:
<div style="width:50px;height:50px;"> <span class="sprite"></span> </div>CSS:
.sprite {
background: url("img/Icon_Set.png") no-repeat -118px -122px;
width: 50px;
height: 50px;
display: block;
background-repeat: no-repeat
}
