How can I replace the img with a DIV that has a background image?

I want to optimize my code. I think I am correct in saying that if I combi开发者_StackOverflow社区ne multiple images into one file then I can't use the position attribute unless the images are part of a background image. But I am not sure how to set up my DIV. Do I need to set the width and height of the DIV? Do I need to do display: block or something like that?

Here's the code that I have so far:

<ul>
<li><a class='disabled' ><img width='16' height='16' src='../../Content/Icons/home.png' />Home</a></li>
<li><a href='xx'  title='xx'><img width='16' height='16' src='../../Content/Icons/xx.png' />xx</a></li>
<li><a href='yy'  title='yy'><img width='16' height='16' src='../../Content/Icons/yy.png' />yy</a></li>
</ul>

if you have multiple images in one file, I'd recommend you to add some classes, as @pduersteler said.

ul li a { display: inline-block; position: relative; width: 16px; height: 16px; }
ul li a.one { background: url('../../Content/Icons/home.png') left top no-repeat; }
ul li a.two { background: url('../../Content/Icons/home.png') -16px top no-repeat; }
ul li a.three { background: url('../../Content/Icons/home.png') -32px top no-repeat; }

Something like this...

If I got this, you want links with icons, right?

Append some classes

<a class="icon home">Home</a>

And add CSS

.icon
{
    padding: 0 0 0 20px;
    background-repeat: no-repeat;
}

.icon.home
{
    background-image: url('path/to/your/icon_home.png');
    background-position: 0px 20px;
}

Now you just have to play with your padding.

EDIT
It looks like you want to use sprites. A List Apart has a good article about sprites here.