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