CSS How to display a single icon out of a matrix for a list item.

Question

Hi,

I would like to use a single icon out of an icon matrix (with around 16 x 16 icons) as the bullet image for a list. I can position the background image with background-position, and repeat: norepeat. But this will display the whole line of the remainder of the matrix, so I'm looking for a way to crop the background image. (By using this I can simply add different background-position lines in my css for diferent states like open collapsed hover etc). It does not necessarily need to run on Internet Explorer. I've been looking to use generated content but I don't think it can't be achieved using that. Next step I will have jquery create a span or div before the text, but it would be nice if I can solve this using purely css.

Answer 1

I don't think this is possible. CSS3 allows to resize the background image, but not crop.

You would have to put the background image into a 16 x 16 Pixel container.

Answer 2

HTML

<ul>
 <li><a href="" title="">link#1</a></li>
</ul>

CSS

li {background: url(sprite.gif) no-repeat 0 0; padding: 0 0 0 16px;}
a {text-transform: uppercase;}

To show the 2nd icon in the 3rd row

li {background: url(sprite.gif) no-repeat 16px -48px; padding: 0 0 0 16px;}

NOTE : sprite.gif has 16 icons, each 16x16px, set in a 16x16 matrix

Answer 3

You can give the <a> tag a solid background and padding to cover up what you're not using, but the drawback is that you can't click on the icon.

Answer 4

You can either alter your sprite so that the icons are spread out such that despite setting it as a bg for an entire li, the other icons aren't shown.

From:

| | | |

To:

|

|

|

|

The alternate would be relying on a 16x16 px container, as mentioned.