Grow your CSS skills. Land your dream job.

CSS Sprite with IMG tag and transparent method

  • # June 18, 2011 at 4:14 pm

    I am using CSS Sprites but at a certain place I felt the need for img tag with a 1px transparent dot.

    So the code is –

    and css is

    .sprite{
    background: url(spriteImage.png) no-repeat -20px top;
    }

    Is this the correct alternate method to use CSS Sprite or it defiles the logic of reducing HTTP requests?

    # June 18, 2011 at 4:38 pm

    It would require an additional request if you do it like that. In the header, your CSS file will be loaded and any javascript, etc. If you use inline styling, it would require an additional request to render that image instead of already having it loaded through your stylesheet.

    # June 18, 2011 at 4:53 pm

    Even if an additional request is created, it should be fast because I am fetching only a 1px by 1px image and that too at may places.

    So is it worth the time?

    PS: @ChristopherBurton thanks for quick response

    # June 18, 2011 at 5:21 pm

    You’re right, it will be a quick render for that small of an image. May I ask what the image is to be exact?

    # June 18, 2011 at 5:30 pm

    @ChristopherBurton social media icons in indented list.

    # June 18, 2011 at 5:48 pm

    can you post the image?

    # June 18, 2011 at 6:08 pm

    I’m not certain what you are trying to do, but it sounds as though you should just be using CSS padding.

    # June 19, 2011 at 8:56 am

    @abhishek: If you are using a 1×1 pixel image, you could just convert it into a data URI. Then you don’t have a HTTP request to worry about. It’ll look similar to this:

    Red dot

    The only problem is there is no way to cache it (I think) and you will have to repeat this format every time you need the same image.

    I got the above img tag example from wikipedia but you can use an online converter to make your own URI string. Please note that larger images make for much larger URI strings!

    Edit: Now that I think about it, a better method for you would be to use one of the other images that you are already using on the page and just clip it. That is if that image has a transparent area. So assuming the top left corner of your image is transparent, your code would look something like this:

    HTML

    CSS

    .tinyclip {
    clip:rect(0 1px 1px 0);
    }

    Here is a post that Chris made about it with more detail.

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

You must be logged in to reply to this topic.

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