Bullet Image Auto-Sizing

Question

I am formatting with CSS3. I have an excessively large image that I am using for bullets. I want the bullet to automatically resize to the size of the font. Am I able to do this?

If not, (darn) how would I set the image-bullet to a particular size? (Such as 12 height, and auto-scaled width)

    ul {
        list-style-image: url('rectangular_bullet_image.jpg')
    }

Answer 1

If you want it to scale to the height of the li, then use Mihnea solution.

If you want it to scale to the font size, use

ul li {
    padding-left: 20%;
    background: url('rectangular_bullet_image.jpg') no-repeat left top;
    background-size: auto 1em; 
}

where the last size (1em) refers to the size of the font. So, if you want it to be slightly larger than the font, set 1.2em

Note that the 2 solutions are aproximately the same if the li's have only 1 line.

It's for the multi-line li's that there is a diference.

Answer 2

try something like this

ul {
    list-style-type: none;
    padding: 0;
}

ul li {
    padding-left: 20%;

    background: url('rectangular_bullet_image.jpg') no-repeat left top;
    background-size: 20% 100%; 
}

heres's a fiddle with it http://jsfiddle.net/YUjdz/1/