I’m always looking for new tricks to add to my magical bag-o-css, but as far as I know, there are about 3 good methods to making shadowlike page backgrounds. I’m not going to go in depth on this since I know these have probably been explained in depth over at ALA or somewhere else, so here’s the short, short version:
You can define a vertically tiling, horizontally centered background image that has the content area and its casted shadow worked in.
- Jasongraphix.com – This seems to be the only part of my site that everybody wants to gank.
- CameronMoll.com – Another classic example.
- MikeIndustries.com – Mike’s vertically tiled background includes the content area, the sidebar, and the gradient that fades to a solid color since he isn’t dealing with a textured background.
Pros: There are a ton. The main one being the ability to add other site background elements to it that you want to continue down the page…like a sidebar.
Cons: Background textures (if you have them) are dependent on that repeating image if you have a drop shadow being cast on them. It’s also difficult to have a bottom on the page for this reason.
If you have a body background that you want to tile vertically and horizontally, and still want that nice drop shadow from your content “layer”, things get a bit more tricky. You can either use a jpeg that has a little bit of the background texture in it being sure to get it to line up by centering the tiled background image, or use what I call the checkered gif. This is just a gif image that is checkered with opaque and transparent squares to make appear translucent.
- Spoono.com – This is the first place I saw this technique. Notice the left-side drop shadow.
- EchoDeep.com – I designed the dark border around the content area on this site using that checkered gif technique.
- This silly little “sandbox” experiment – I did this a about a year ago when I was tinkering with background concepts…but it has a checkered gif that also fades out to match the background. (May not be compliant with…well…any browser as it was just an experiment.)
Pros: You get a shadow in IE…
Cons: It’s a very limited technique and using Checkered gifs is really just a hack for not having png translucency support in IE yet. ARGH!
Make ACTUAL SHADOWS using alpha-transparent PNGs for the browsers that support it. What a novel thought. If only Microsoft would get on with releasing IE7 so I can relabel this entire post “obsolete”.
- Maratz.com – Check it out in Firefox, then go back and see it in IE6.
Pros: It’s the right tool for the job and it’ll revolutionize web design once it’s fully supported.