Technology

Body Background Images Done Easily

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):
Background with Illustrator

Here’s an example of how the output would look with the background image:
Example of 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!

2 Comments

  1. 1
  2. 2

Leave a Reply