Style
element with CSS background, to show only a part of images

Question

Can anyone help me with list.

I have an image: enter image description here

And now I need to build list with default bulls replaced with left side arrow (but not with whole image):

enter image description here

How I can achive it using cross-browser css?

My HTML markup is:

<ul>
    <li><a href="#">Conveniently located on Adelaide St. W, one block east of the Bathurst   and Adelaide intersection, just north of the Gardiner Expressway, downtown Toronto.</a></li>
    <li>All units are located indoors, which means they are all climate controlled.</li>
    <li>There is an indoor loading dock with four bays, two of which are large enough to accommodate up to 50' trailers.</li>
    <li>Complimentary use of on-site dollies and pallet truck.</li>
</ul>

can you change the arrow image so as to make them farther apart? — Joseph Marikle, Oct 24 '11 at 12:59
yes I can, but generally all problem is that I want to store them together (there are sheets of images for every color scheme). — Arthur Halma, Oct 24 '11 at 13:04
how cross browser does it need to be? :P is IE > 8 sufficient? — Joseph Marikle, Oct 24 '11 at 13:11

score 5 · Answer 1 · edited May 23 '17 at 12:01

5

See this question regarding using Sprite images with list style backgrounds:

use CSS sprites for list (<li>) background image

edited May 23 '17 at 12:01

Community

1
1

answered Oct 24 '11 at 13:07

Curtis

101,612
66
270
352

score 2 · Accepted Answer · answered Oct 24 '11 at 13:15

2

I guess this is what you were asking for.

Check out this fiddle

Here is the code

The HTML is the same.

The CSS

ul {
    list-style: disc inside none;
}

ul li:before {
    position: absolute;
    content: "";
    left: 8px;
    background: url('https://i.stack.imgur.com/KKMcz.png') no-repeat #fff;
    width: 8px;
    height: 14px;
}

answered Oct 24 '11 at 13:15

Aniket

9,622
5
40
62

Exactly! It is exactly what I want. Did this method work under IE7+ ? – Arthur Halma Oct 24 '11 at 13:18
@ArthurHalma Not sure, but I don't think IE8 or below supports pseudo-selectors. But you can use [selectivizr](http://selectivizr.com/) to make it work in IE. :) – Aniket Oct 24 '11 at 13:22
I thought of this too... had a demo even... but it won't work on IE7 – Joseph Marikle Oct 24 '11 at 13:23
@Joseph Use [selectivizr](http://selectivizr.com/) . That should do the trick in IE :) – Aniket Oct 24 '11 at 13:24
@Aniket they don't list :before as a supported pseudoclass. – Joseph Marikle Oct 24 '11 at 13:26
@Joseph Let me check a little more on how to do that :| Why is IE there to make it a hell for us :( – Aniket Oct 24 '11 at 13:33
@Joseph Found this - https://github.com/kevindees/ie7_pseudo_elements But this only makes it work in IE7, there seems to be no way to make it work in IE6. My suggestion is that you go ahead and let it not work in IE6 (can't help cursing IE6 so much :P) – Aniket Oct 24 '11 at 13:42
`::before` is not supported in IE7 and earlier. All other browsers support it though. – Paul D. Waite Oct 24 '11 at 13:43
@Aniket I empathize. XD IE is a pain to us all :\ – Joseph Marikle Oct 24 '11 at 13:47
Haha, I do not care about IE now. I make things look pretty in FF, Chrome and Safari (and sometimes Opera). **IE** is *ignored* by me :P I hope the above solution would be sufficient. But it would be great if someone comes up with a better method. – Aniket Oct 24 '11 at 13:50

score 1 · Answer 3 · answered Oct 24 '11 at 13:14

you need to set the

background: transparent, url(/image/sprite.png) no-repeat -XXpx -XXpx;

where the -XXpx moves the position of the element. The only problem with this is you will have to make sure the padding on the li where the bullet shows is not too wide and shows only the size of the image you want.

the other option you have is to set the list-style-type: none; and then drop a div or span at the beginning of you li elements that you want to have the image. I wouldn't recommend this but it would work,

score 0 · Answer 4 · edited Oct 24 '11 at 13:06

0

ul {
     list-style-image: url(/xxx/xxx.gif);
}

Will give you the whole image, can't you just then split the image down the middle and use the left part?

edited Oct 24 '11 at 13:06

Curtis

101,612
66
270
352

answered Oct 24 '11 at 13:04

dan360

361
2
16

1

The OP seems to be using a sprite image, so it may not be possible for them to split this image for performance/bandwidth purposes – Curtis Oct 24 '11 at 13:06
actually I was not honest with you (the whole image is much bigger, on example is only part of it), so it will be not so easy to re-css rest of the pages (I just whnt to use the same image for every UI element). In this case changing of color scheme is much faster. – Arthur Halma Oct 24 '11 at 13:08

score 0 · Answer 5 · edited Jun 20 '20 at 09:12

Here's another method that should be cross-browser. You would need to change your sprite image, however. ~~(I couldn't seem to open the image with Photoshop or GIMP or any thing else without it messing up, though. You would have to fix it up yourself).~~ (fixed)

Demo

Basically it offsets the other image vertically instead of horizontally. If you have longer lists, you will have to modify how far it is offset vertically. This should work on all browsers and I tested it in IE9 with compatibility settings changed. it works even in quarks mode.

The modified image looks like this:

enter image description here

Style element with CSS background, to show only a part of images

5 Answers5

The CSS

Demo

Style
element with CSS background, to show only a part of images