Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: Positioning of list-style-image

I have a list with list-style-image:url("../images/prices/tick.png");

How can I position the image correctly so that the image and the text are on the same y coordinate? Wasn't there a way to define it right after the url with url("link") 20px 30px?

I can't seem to find the info online on how it was done again.

like image 611
Frank Vilea Avatar asked May 25 '11 15:05

Frank Vilea


2 Answers

I think you're thinking about using a background-image rather than the list-style-image..

so set the list-style to none and put a background-image on the li - then yes you'll be able to position it a bit more accurately using the background-position part of this:

background: url("link") no-repeat 20px 30px;
like image 137
clairesuzy Avatar answered Oct 09 '22 08:10

clairesuzy


You can try something like this:

ul {
    list-style:none;
}
li {
    background:url(image.gif) no-repeat 0 0;
    padding-left:16px;
}

So background position and padding value could be configured.

like image 26
silex Avatar answered Oct 09 '22 09:10

silex