image slicing - one large image or a succession of smaller images

Question

Hi,

I'm chopping up a new design into valid HTML/CSS. This particular design has several images that are very detailed and I'm debating on how to approach dividing them up.

Here is a link to a folder containing the different options I see. There are four aptly named images - bg.brickLeft, bg.brickMiddle, bg.brickMiddle, bg.combined.

I'd just like some input in how other web-developers would break up this design. bg.combined is obviously what the final product needs to look like.

I'm leaning towards bg.combined because 1) less css 2) one http request - but the CSS purist in me is screaming and even wants to separate the gradient into a 3px wide repeatable image.

I'm concerned with the bg.combined approach because it won't look so pretty when loading on slower connections.

How would you approach chopping up this design?

What are the technical pro's/con's you see for these two approaches?

Would you approach it entirely different?

EDIT - Also, the height of the site is static

Answer 1

I'm a fanatic for giving people with wide screens something to look at (you mention static height, but there really is no such thing as static width), so for me, I would make the brick left/right into an image that can be repeated nicely and have a repeat-x applied to it so that wide screen visitors saw more wall.

Other than that, I would leave the center one as my content background in a div centered on the page. So the short of it is, I would do 2 images, the brick as the body background and the patterned 'middleBrick' as my page wrapper div background.

Answer 2

I ended up combining these images, in addition to adding a wider background.

Here is the final result