5

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.

4

4 Answers 4

11

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;
4

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.

1
  • Beat me to the punch! I was writing this exact method.
    – breezy
    May 25, 2011 at 15:17
0

According to Mozilla's Developer Docs on list style, you cannot position the list marker using CSS. The closest is list-style-position, which only lets you position the marker as inside or outside the list elements.

If you want to position the image, you're going to have to edit the image itself, or use the image as a background instead.

0

Created a jsFiddle for you to work with. I adjusted the background image position so it would look more like a bullet.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.