CODEWITHSUNDEEP
cssimageposition
Frank Vilea
Frank Vilea

Reputation: 8487

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.

Upvotes: 5

Views: 34045

Answers (4)

clairesuzy
clairesuzy

Reputation: 27624

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;

Upvotes: 11

pixelbobby
pixelbobby

Reputation: 4440

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

Upvotes: 0

thedaian
thedaian

Reputation: 1319

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.

Upvotes: 0

silex
silex

Reputation: 4320

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.

Upvotes: 4

Related Questions