Content Marketing

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!

Douglas Karr

Douglas Karr is CMO of OpenINSIGHTS and the founder of the Martech Zone. Douglas has helped dozens of successful MarTech startups, has assisted in the due diligence of over $5 bil in Martech acquisitions and investments, and continues to assist companies in implementing and automating their sales and marketing strategies. Douglas is an internationally recognized digital transformation and MarTech expert and speaker. Douglas is also a published author of a Dummie's guide and a business leadership book.

Related Articles

Back to top button