CSS Sprites..

[camelCase]

I've always used one sprite per HTML element.
I was wondering if it were possible to have more than one HTML element share the same sprite.

Like,
<div id="something"></div>
<div id="somethingElse"></div>
<div id="somethingElseEntirely"></div>

The three (possibly more) divs would like to share the same sprite sheet.
How would I do that?

I usually do this:

#something {
    width: 400px;
    height: 100px;
    overflow: hidden;
    background-image: url('someImage.png');
    background-position: 0px 0px;
}

#somethingElse {
    width: 400px;
    height: 100px;
    overflow: hidden;
    background-image: url('someImage.png');
    background-position: 400px 0px;
}

#somethingElseEntirely {
    width: 400px;
    height: 100px;
    overflow: hidden;
    background-image: url('someImage.png');
    background-position: 800px 0px;
}

But it will load 'someImage.png' three times from the server, right?
I just want to load it once and have that one sprite be used for all the divs.

 

[UndeadDragon]

>But it will load 'someImage.png' three times from the server, right?

I always thought background images were cached.

 

[phyrex1an]

Images are typically cached by browsers, yeah.

This is a decent tool btw: http://csssprites.org/

 

[GetTriggerUnit-]

>But it will load 'someImage.png' three times from the server, right?

I always thought background images were cached.

I guess they would be cached if you set cache control headers..

 

[UndeadDragon]

I guess they would be cached if you set cache control headers..

I'm pretty sure it is the default too.

 

[Miz]

>But it will load 'someImage.png' three times from the server, right?
No Once a browser loads an image on a page it will cache it like Undead said. That is the important part of

I used a sprite sheet on http://starcraft-2-galaxy-editor-tutorials.thehelper.net/tutorials.php, I didn't use a generator I just put the seperate icons I had at the end of the design into one single image together with GIMP. I then used a similar code to what you have to seperate them again on CSS. Though there are a few things I think I might be able to help you on.

If you curious to how I did things this what it looks like CSS wise:

Image - http://starcraft-2-galaxy-editor-tutorials.thehelper.net/design/sprites.png

Some Example CSS:

.site-navi {background:url('http://starcraft-2-galaxy-editor-tutorials.thehelper.net/design/sprites.png') -197px -125px no-repeat; width:195px; height:40px;}

.editorbas {background:url('http://starcraft-2-galaxy-editor-tutorials.thehelper.net/design/sprites.png') -197px -205px no-repeat; width:195px; height:40px;}

.editoradv {background:url('http://starcraft-2-galaxy-editor-tutorials.thehelper.net/design/sprites.png') -197px -245px no-repeat; width:195px; height:40px;}

.melee {background:url('http://starcraft-2-galaxy-editor-tutorials.thehelper.net/design/sprites.png') -197px -165px no-repeat; width:195px; height:40px;}

.affiliates {background:url('http://starcraft-2-galaxy-editor-tutorials.thehelper.net/design/sprites.png') -197px -286px no-repeat; width:195px; height:40px;}

Mainly you have to make sure the divs width and height parameters are set, make sure the background positioning (where your sprite is located in the sheet how much x and y its over) is correct (its usually a negative term not a positive which is what I noticed you put as yours). After that just implement and you should see some results.

So I would recommend instead of having "background-position: 800px 0px;"
try "background-position: -800px 0px;".

PS -> Sprite Sheets can work only work on repeating items some of the time, such as if the sprite takes up the entire sprite sheet ether horizontally or vertically. If not it needs to have no-repeat or it will not appear as desirable.

Hopefully it all works well! :shades:

 

[JerseyFoo]

This is the whole reason you use CSS sprites. It reduces HTTP requests.

 

[camelCase]

Oh, cool.
I didn't know they were cached =/

@Miz
Yeah, you're right, I should use negative offsets ><
I was scratching my head for a bit when it didn't quite work out until I did that, thanks.