Making It Big – Large Background Images

/in /by

There’s no good layout with a page background that isn’t a good layout without a page background. And since different browsers handle background image positioning differently, there’s additional work in building the page. But while you should avoid complex, patterned backgrounds like the tap water in Chihuahua, there are times when a large page background image can add impact. So I’ll share two of my favorite ways to use a page background.

To avoid the dreaded “tiled pattern” effect, create very wide images. The minimum width is 1200 pixels. The most popular viewing resolution, according to recent studies, is 800 x 600, but by setting the width to 1200 pixels wide I avoid repeats on over 98% of the monitors. And yes, there are ways to control background image placement and repetition with the current HTML 4+ standards, style sheets and browser-specific code, but using these methods create dependencies on the web site. We want our pages to be as accessible to as many viewers as possible, so dependencies are bad. If you prefer to use a style sheet to control positioning and repetition, simply be aware that some site visitors are not seeing what you expect.

Creating Vertical Columns & Patterns

The first method actually isn’t a large page background. It’s just a very wide, but vertically narrow, background that repeats down the page creating a vertical pattern.

  1. To create this background, open a new window in your graphics program 1200 pixels wide by 20 pixels high.
  2. Create your repeating pattern. Remember this will be a verticalrepeat. For example, If you want a left-hand column of color, make a rectangle of flat color as many pixels wide as your column and 20 pixels tall.

    You can also use lines, dashes, letters, whatever you want. Use very few colors and preferrably web safe colors. This lets you to make large graphics that optimize into a very tiny digital packages.

  3. Save your image as a gif file optimized to the fewest colors possible as shown below.

Example 1 used only 4 colors and gif compresses to less than 1k (380 bytes to be exact). It loads in less than 1 second at 28.8k and creates a visual left-hand column that is 200 pixels wide and a grey line that runs vertical at 500 pixels across the screen.

Creating a Large Image Background

My other favorite background trick is using a large image for impact. It depends upon maximum optimization so the fewer colors necessary the better.

  1. For a large image background, open a new window in your graphics program at least 1200 pixels wide and 800 pixels high. (Long pages will have a repeat as the viewer scrolls down past 800 pixels. To avoid this on a long you must increase the image height.)
  2. Create your large image. You can use whatever you want including line art, but if you are going to run text over this image (and most of us do), keep it very pale and simple in design. Use very few colors and preferrably web safe colors so you can optimize into a very tiny digital package.

    If you want the image centered on your page place it between 320-400 pixels from the left edge and 240-300 pixels down from the top edge.

  3. Save your image file optimized to the fewest colors possible as shown below. If you are using flat, line art or a stylistic image, use gif compression. See example 2 below. If you are using a photographic image than needs to remain photorealistic, use jpeg compression. See Example 3 below.

Example 2 uses 4 browser safe colors and gif compresses to 7.1k, loading in less than 3 seconds at 28.8k.

Example 3 uses a photographic background image. Monochromatic photographic images, lightened heavily, work best as page background images. Otherwise, considerably time and energy goes into working the text around the image. Plus full-color images generate larger files. Save the full-color for standard page images. Try jpeg compression for the final background image if you want to keep more photographic details.

Two examples of the technique are graphic designer and author, Lynda Weinman’s site and the All STARS Hockey Team pages. Note than Weinman actually uses a large, flat graphics background designed to continuous repeat the image across all size monitors and that she doesn’t run text over her images so she can be very bold.

Coding the Web Page

To put your background image to work, add the following code to your HTML <body> tag:

background=”path_to_your_image_if_necessary/your_image_file_name”

replacing the path_to_your_image_if_necessary/your_image_file_namewith the location and name of your background file.

The background for the Example 1 sample page looks like this: <body bgcolor=”#ffffff” background=”../images/bkg_sidebar_example.gif”>

With HTML 4.0+ and XHTML standards, the background attribute has been deprecated in favor of using style sheets for placing background images. Unfortunately, not all browsers currently in use are fully HTML 4.0+ compliant, but if you page design doesn’t actually require the background image (and remember my dictum, there’s no good layout with a background image that isn’t a good layout without a background image), you can specify both background positioning and repeat precisely.

I’m not going into a full discussion of style sheets. But the code below will give you an idea of how to modify a style sheet to include a background image:

body { background-color: white;
background-image: url(../images/bkg_sidebar_example.gif);
background-position: center middle;
background-repeat: no-repeat;
}

If you’d like to start working with a style sheet, check out the article, “Style Sheets for the Terminally Impatient”.