Grow your CSS skills. Land your dream job.

list content image and more server requests

  • # December 29, 2011 at 12:41 pm

    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?

    # December 29, 2011 at 12:45 pm

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

    # December 30, 2011 at 11:39 am

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

    # December 30, 2011 at 12:26 pm

    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.

    # December 31, 2011 at 3:45 am

    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.

    # December 31, 2011 at 2:32 pm

    You could include the colored background in your sprite?

    # December 31, 2011 at 3:30 pm

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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".