CSS Sprites

HTML & CSS
1

Hi,

Is there a tutorial about css sprites here in this forum? I would like to start using this technique.

Thanks

2

Basically you just combine multiple images into 1 file and then use background-position to move around that image to show a specific one :slight_smile:
A List Apart: Articles: CSS Sprites: Image Slicing’s Kiss of Death
A List Apart: Articles: CSS Sprites2 - It’s JavaScript Time
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

You can google more tutorials :).

3

Here ya go… http://www.visibilityinherit.com/code/sprites.php

4

Thanks a lot!

5

Here’s an interesting variant: instead of positioning a background image it uses positioning of the IMG element.

6

Luki, interesting as that may be, the whole point of sprites is to reduce HTTP requests (aka less loading) and to increase the overall speed of hte website.

Using <img>'s actually increase the HTTP requests and do not increase the speed of hte website :).

Not to downput your link, it’s quite interesting :).

7

I know what the purpose of sprites is :smiley:
Just wanted to show a road off the traditional path lol. Besides, both techniques have their pitfalls…

8

The one EricWatson posted doesn’t seem to have pitfalls lol :). The ones I posted do however, though they (like you) just were to show the purpose of sprites.

Off Topic:

I love these battles we have in random threads :D. Not battles though…lol :wink:

9

Lol, the one Eric posted has a remedy for the pitfall i had in mind: Images off/Css on lolol.

Darn, another one bites the dust (me that is) :smiley:

10

Here ya go… http://www.visibilityinherit.com/code/sprites.php

So, is this the best technique?

11

It works in the most scenarios, so yes :). The only drawback is an extra element however that is a small price to pay for all scenarios accounted for.

12

The only drawback is an extra element

What is that extra element?

Thanks a lot!

13

The <b> :).

14

Is it critical to have extra elements?

Why?

Thanks

15

In this case that element is needed for this technique to work in IE8 and Opera if i’m not mistaken.

16

I’ve seen a version like Eric’s which used JQuery to slide the image up smoothly.

And it looks like I didn’t bookmark it…

17

No the <b> simply enables the text to be visible in ALL browsers in the css on/images off scenerio.

18

ah, i see. Should have read the article before i posted lol