Website Design – Using Background Images


Where Can Background Images Be Used?

The first thought when thinking about background images is always for the body section surrounding the content area, but background images can be used with most html tags and are not limited to use in the body section. Not only can you assign a background image to the body tag, you can also assign a background image to a div, an h* tag, or even a p tag. Using css and background images gives you a good deal of control of the visual presentation of your material.

Tips for Body Tag Backgrounds

I prefer to use a symmetrical tilling image for the body background. If the image incorporates a heavy pattern I set it up so that it does not scroll with the page. I use the center top position and tile both horizontally and vertically.

A symmetrical image forms a continuous background without visible seams. The actual image file can be quite small so that it downloads rapidly. Using a full background image usually means a large file. Surfers on slower connections may never see your background image if it takes too long to download.

Other options include using a special image to form a bleed or color gradient from a side or the top of the window. This is visually appealing and may be more appropriate in some situations. To use a gradient image one sets the file up to tile only horizontally or vertically. The background color for the page can be set to blend with the end of the image to maintain the color.

Using Background Images in Content Areas

I like to use background images in content areas to give the page some texture. When using a background image for a content area one must be sure that any pattern and color does not interfere with the readability of the page. I prefer lightly textured pastel colors for content areas.

These images I do want to scroll with the page. While having the body image scroll with the page can be distracting, having the text scroll over a background image can also be a problem. If a background color or image is used it is important that there be good contrast between the text and the background.

Using Backgrounds With Other Tags

Assigning a background color or image to a heading or paragraph tag can be a way of emphasizing the content of the tag. You can use a light pastel color to highlight a paragraph or a section of the paragraph. You can also apply a border to one of these elements to put a section of text in a box.

Background Images Can Make Your Site More Interesting

The creative tasteful use of background images can greatly improve the visual appeal of your website. Than can turn a Plain Jane website into a Cinderella. How could you use background images to improve your web designs?


Leave a Reply