CSS Sprite with IMG tag and transparent method

[Historical Forums User]

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?

[chrisburton]

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.

[Historical Forums User]

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

[chrisburton]

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?

[Historical Forums User]

@ChristopherBurton social media icons in indented list.

[chrisburton]

can you post the image?

[Author]

Posts