The Marketing Technology Blog

A nice feature you’ll find on many sites is where the center content area appears to overlay the page with a drop shadow behind it. It’s actually a fairly simple method to making your blog look nice (or other website) with a single background image.

How is it done?

1. Figure out how wide your content is. Example: 750px.
2. Build an image in your illustration application (I use Illustrator) wider than the content area. Example: 800px.
3. Set the background of the image to the background you wish to have on each side of the blog.
4. Add a white region over the background.
5. Apply a shadow on the white region that extrudes from either side of the region.
6. Set the crop area the width by 1 pixel in height. This will make the image to download nice and compact for quick rendering.
7. Output the image.

Here’s how I constructed it using Illustrator (note that I have the crop area much taller… that’s just so you can see what I’m doing):

Here’s an example of how the output would look with the background image:

Here’s how to apply the image using your body style tag in your CSS file.

background: #B2B2B2 url(’images/bg.gif’) repeat-y center;

Here’s a dissection of the background style tag:

• #B2B2B2 - sets the overall background color of the page. In this example, it’s gray to match the gray on the background image.
• url(’images/bg.gif’) - sets the background image that you would like to use.
• repeat-y - sets the image to repeat on the y-axis. So the background image will repeat from the top to bottom of the page.
• center - sets the image in the center of the page.

Nice and easy… one image, one style tag!