Sprites for background image

[batti3004]

Hi, i have a question, is it possible to use the css sprite method for background images, if yes how? i made a sprite from my background images but i did not manage to figure out how to use it.

[SevenCubed]

Yes you can use sprites for background images. Rather than attempt to repeat what someone else has shared with us I would offer a very good existing tutorial -- just search using the term "A List Apart sprites" and go with the first result that comes up. It's very thorough and very helpful.

[batti3004]

Yes its good, but it does not work at all for body and table backgrounds.

I have the sprite with the body background first, but the browser loads all the 4 sprites for the body not just the first one.

[londrum]

do you mean that all four pictures are on one image? that will only work if the background for the body is to the left of the sprite, and the rest are to the right.

ie. if youve got the background for the body at the top of the sprite, and the rest underneath, then that will only work if the page is always shorter than the first bit. which you have no real way of knowing, because you dont know how wide the users browser is, and how big they set the fonts.

what you need to do is make a background image wide enough to take in every possible screen resolution (ie at least 1200px wide), and put all the other images to the right of that.
that way they will never appear, even when the page is longer than the background.

(i know i didnt explain that very well!)

[topr8]

are you trying to tile the image as the background? i don't know how to do this with a sprite or if it's possible at all.

[Fotiman]

With sprite images you need to have a very fixed size area that you're trying filling with the image. Therefore, unless your body has an explicit size, it would not make sense to use a sprite image for the body.

[batti3004]

My site uses 4 64x64 images, 1 for the body, 1 for main table and the other two for secondary table. All four are backgrounds, and just wanted to make one file from the 4.

[bzgzd]

I use sprites for background often like this:
background: url("sprite.png") no-repeat -100px -50px;

So with "no-repeat" for background-repeat.

Sometimes I use sprites also for CSS menu background when I have variable width but fixed height like this:

#menu
{
background: url("menubg.png") repeat-x;
height: 40px;
}

#menu a:hover
{
background: url("menubg.png") repeat-x 0 -40px;
}

So my menubg.png is 80px height (only 1px width) and top 40px is one gradient and bottom 40px is second "hover" gradient.


But if you are repeating that background image in both directions (default), then you can't use sprites.

[edited by: alt131 at 1:25 am (utc) on May 17, 2011]
[edit reason] Thread Tidy [/edit]

[Fotiman]

My site uses 4 64x64 images, 1 for the body, 1 for main table and the other two for secondary table. All four are backgrounds, and just wanted to make one file from the 4.

As I mentioned, unless your body and tables have explicit sizes set, you can't.