CSS Img
=======
Example 1
---------
img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}
- Only defines a small transparent image because the src attribute cannot be empty.
The displayed image will be the background image we specify in CSS
width:46px;height:44px; - Defines the portion of the image we want to use
background:url(img_navsprites.gif) 0 0; - Defines the background image and its position (left 0px, top 0px)
Example 2
---------
#navlist{position:relative;} - position is set to relative to allow absolute positioning inside it
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin and padding is set to 0, list-style is removed, and all list items are absolute positioned
#navlist li, #navlist a{height:44px;display:block;} - the height of all the images are 44px
#home{left:0px;width:46px;} - Positioned all the way to the left, and the width of the image is 46px
#home{background:url(img_navsprites.gif) 0 0;} - Defines the background image and its position (left 0px, top 0px)
#prev{left:63px;width:43px;} - Positioned 63px to the right (#home width 46px + some extra space between items),
and the width is 43px.
#prev{background:url('img_navsprites.gif') -47px 0;} - Defines the background image 47px to the right (#home width 46px + 1px line divider)
#next{left:129px;width:43px;} - Positioned 129px to the right (start of #prev is 63px + #prev width 43px + extra space),
and the width is 43px.
#next{background:url('img_navsprites.gif') -91px 0;} - Defines the background image 91px to the right
(#home width 46px + 1px line divider + #prev width 43px + 1px line divider )