How to sprite a back

April 4, 2012 3:40 PM

Web design question about using the CSS Sprite technique for speeding up page loads, but while hiding part of the background.

I am trying to build a website where the hi-res background image--let's say it's about 960 pixels wide, and non-repeating--shares space in a larger PNG with all the other little images from the page.

I stuck this background onto a tag. The trouble is that if you scroll 2,000 pixels right, you can see all the other icons and pictures that aren't part of the background.

What is a good way of making the background image cut off a certain number of pixels to the right? I would just interpose a new to deal with this, but am worried about messing up some existing layout. Any help much appreciated.

posted by steinsaltz to Technology (8 answers total)

Response by poster: Meant to type there that I stuck the background onto a Body tag.
posted by steinsaltz at 3:42 PM on April 4, 2012

Best answer: I'd separate the background from the rest of the sprites, specially if the background is a photo and the rest of the sprites are more icon-like. A photo would look better and weight less in JPG, and the icons, in PNG format.

The background-size CSS property does what you need, but it's not widely supported yet. More information here.
posted by clearlydemon at 3:46 PM on April 4, 2012

Sorry, background-size won't crop your background image; it will scale it to the size you indicate, so it wouldn't work for what you need it.
posted by clearlydemon at 3:48 PM on April 4, 2012

Best answer: Yeah, you're not really meant to use the sprite approach here. As clearlydemon says, JPG is probably going to get better compression for a photo, and secondly, the point of sprites is to reduce all the overhead incurred in requesting lots of small images (where round-trip time adds up and the bandwidth of the overhead starts to approach a significant fraction of the b/w of the actual data). Put your background image in its own file.
posted by axiom at 3:59 PM on April 4, 2012

Best answer: I agree with clearlydemon. CSS sprites are fine for little icons, but for anything large, just make them a separate file, especially if they'd benefit size-wise from JPG compression. The whole idea behind CSS sprites is to reduce the overhead from fetching lots of small images. With large images, that overhead is going to be dwarfed by the download time for the actual image data.
posted by zsazsa at 4:01 PM on April 4, 2012

Response by poster: Thanks for the image format wisdom. That clears things up. If I separate the big JPG and the sprited PNG full of icons, that is probably for the best. I wasn't sure if maybe there was some CSS cropping function that I had not heard of.
posted by steinsaltz at 4:04 PM on April 4, 2012

Beyond the excellent advice already given (to not use a sprite for this), you could have made it work by wrapping the entire page's content in a div sized to the background image size with overflow hidden, position absolute and top 0 left 0. But that's just to fill in the knowledge gap, since not spriting this for the reasons noted above is the right solution.
posted by davejay at 10:01 PM on April 4, 2012

(er, sorry, not wrapping it, but putting it separately, and z-index'd -1 as well)
posted by davejay at 10:03 PM on April 4, 2012