Matt Blake: Internet Newspapers and Magazines

Background images

Whether serving as a method to frame the page, incorporate a faded picture behind text or use patterns in a specific area, the background image is an important tool at the web designer’s disposal.

Perhaps the best examples of the power of background images in Web publishing, the submissions to CSS Zengarden apply backgrounds to a variety of HTML tags. Nowhere in these examples are traditional IMG tags used.

Common tags that use backgrounds

Almost any tag that fills space in the browser window—i.e. not the img or br tags—can employ a background image. But most often backgrounds are incorporated in the CSS of these XHTML tags:

body: Used for a patterned background (or faded photograph) behind the content of the page.
div: Used for backgrounds in a particular section of the page.
a and a:hover: Links can employ small backgrounds and when placed on the hover element, the image turns “on” and “off” depending on the placement of the mouse.

For our purposes, there are four primary types of background images and we initially change the body background appearance:

The basic background image

Repeats both horizontally and vertically
Used for small images made in Photoshop
body {
background-image: url(file_name.ext);
}

The horizontally repeating background

Image repeats only horizontally; stops repeating once it reaches end of browser window
Usually a narrow, vertical image that is used for framing vertical area of page
body {
background-image: url(file_name.ext);
background-repeat: repeat-x;
}

The vertically repeating background

Image repeats itself down the page until reaching the bottom of the browser window, where it stops repeating.
Usually a horizontal image that frames the page left-to-right
body {
background-image: url(file_name.ext);
background-repeat: repeat-y;
}

The non-repeating background image

This image is singular and can be positioned within the element where it serves as a background.
In the below example, the background-position element contains both horizontal and vertical position dimensions. The horizontal dimension appears first.
Often used when a CSS-generated link needs an image or the page or division needs a faded (low-opacity) background image.
body {
background-image: url(file_name.ext);
background-repeat: no-repeat;
background-position: 10px 20px;
}

Simple background creation

Open Photoshop. While many backgrounds are offered on the Web to freely use, designers generally require customized backgrounds with specific colors and dimensions.

Our first background will be a simple, repeating lined image that is made by following these steps:

Start a new image

Since we need the image to repeat both horizontally and vertically, it must have the same width and height.
Make it very small, in order to make it easily downloaded by the visitor. Let’s start with 4 pixels x 4 pixels.
Make it transparent.

Resize the preview

Naturally, there is not much that can be accomplished with a 16-pixel-square image without expanding our view.
To do this change the “100%” to “1600%”
Now we can draw in our canvas.

Use the pencil tool

Selected by holding down on the brush tool (in toolbar), the pencil tool allows for 1-pixel drawing. Refer to the toolbar image introduced earlier if needed.

Choose a foreground color (located at the bottom of the toolbar).
With the pencil tool create a vertical or horizontal line by clicking once per pixel.
Be sure the line is drawn straight, to ensure it repeats cleanly.

Save it

Select File > Save for Web and Devices
Save the file as a PNG-24 with the file name “bg.png”.
Return to your CSS stylesheet or begin a new CSS document and type the following (or add to the body element if it is already defined):
body {
background-image: url(bg.png);
}

Look at it

Save the CSS, link it to a HTML document, open a browser window and open your page.
The result will be a horizontally striped background that is difficult to visually endure.
Change its color by returning to Photoshop and using the pencil tool to create a new line over our black pixels that more closely incorporates our page background color.

Make it vertical

To make the background vertical, we can either start a new small graphic or simply rotate our existing image. For simplicity’s sake, we will do the latter.

From the menu bar, select “Image > Rotate Canvas > 90° CW”
This rotates the image clockwise and makes our stripe vertical.
Save as “bg.png” and refresh the page.

Make a diagonal background

Besides a vertical or horizontal repeating background, it is possible to make a diagonal image with the same tools.

Start a new canvas with equal width and height.
Using the pencil tool, click a diagonal pattern of square pixels. Hold shift to ensure it is a 45 degree angle.
Save for Web and Devices over the existing “bg.png”.
Refresh the page.