How do they do that: many background images on the same image.

Question

I'd like to know how they use the same image to use it as background for several elements.

for example:

all YouTube element's background are on this single image:http://s.ytimg.com/yt/img/master-vfl47921.gif

all Ask.com element's background are on this single image:http://sp.ask.com/i/h/sprite/b3.png

all Deviantart element's background are on this single image:http://st.deviantart.com/minish/main/sleek.gif/5.gif

I wonder if somebody could tell me how they do it and where i can find some guides/tutorials to do that.

Answer 1

d**n it, I'm lucky you showed me some nice trick!

Okay, I will use www.ask.com for the example.

Go to that site, open up the source. You can see that the logo has the id "logoimg". The source file is b3.png. Now checkout the stylesheet. Many element ids share the common background-image. Now check out each of those ids. You can see that they all have this background-position attribute. Also, width and height are also defined there. I don't know how the borders are done, but I think they all are pure CSS.

By the way, they are placed in the website with a div. The logo is a div. The speech bubble's left and right is also a div. What div oriented cyberspace it has come to these days...