list content image and more server requests

[farzadina]

I have many li tags and want to show a small image inside of them. I use content:url('...png'), and should give each li an image URL. So The server requests increase, one request for each image. And we can’t use something like background-position to reduce request here.

One of the solutions that I found is using CSS based images (base64).

Is there any other ideas?

[TheDoc]

It’s the same image for every list item? I can’t see how you couldn’t use a background image here…

[farzadina]

No, they are not same. See my Sidebar Here, at the right of page, the 3th box, the colorful-hover list…

[TheDoc]

You could give each li a unique id and then put a background on them that way. And you could use a sprite to make sure only one file is being downloaded.

[farzadina]

Yea, and how to keep the background image on hover?
On hover, the color cover the icon. Result.
There will be a transition problem if I use another background tag on hover.

[TheDoc]

You could include the colored background in your sprite?

[farzadina]

I want my li to have a background-color on li:hover. What’s your purpose about including the colored background in sprite?

[Author]

Posts