I am working on my company's website, and I need to create a css shadow around my container. My container is fixed width, so would it make the most sense to just make the image one large image in the background? How would you go about laying this out as far as html and css?
A simple solution would be to make a 1px high by X wide image (X is the width of the container) with the left and right shadows and repeat that down in the container. Then use a background-image for the footer div for the bottom part and bottom corners of the shadow.
I did this the other day using pure css. I can't find the code right now but what I did (in a nuthshell) is have the container, wrapped it in as many div's as the shadow was wide and set the background-color for each.
I'd do the background as a 1px high repeated image in photoshop, repeated. the header / footer images would be separate files. This is the nicest looking, most fool-proof way of achieving the look you want, IMO.
It's very wide due to the tiled background (diagonal stripes), but if you're on a solid background you can make it the width of the container + (shadow * 2).
I prefer to use the image on the background of the page (body {background: url(.....) no-repeat top center;}).. "top center" is used when the layout is centered, it keeps the background centered on the page no matter how wide the screen is (hence the large width of my image, it will look fine up to 1600x1200, any bigger and you will notice the pattern stops).