Search this site

 

Background Images Explained

Background images, wallpaper or stationary as it is sometimes called, can add spice to an otherwise lackluster page. Used correctly and with text of adequate size and contrast, background images can be an effective site motif. Avoid using busy backgrounds in the content areas of your site. But feel free to use soft textures or gradient fills to create subtle visual interest.

Having it both ways

Try placing a textured background beneath a solid colored division or table, as in this Example.

Don't go overboard

Use the smallest image size necessary for the task. Background images can be defined in your site's CSS to repeat either vertically, horizontally, both or none. So a little image can go a long way.

A common mistake among new web designers is trying to "fit" content precisely over a large, absolutely positioned background image or photograph. Don't waste your time. It not only doesn't work - owing to browser and display variability - but your page will break apart as soon as someone increases text size in their browser - which happens quite often on larger displays. Moreover, large images take much longer to load and are thus rarely used as background images.

Using BG colors with BG images

This may seem silly at first but what if your background image fails to load? Or perhaps an end user has disabled background images in his/her browser... For these and other reasons, the W3C recommends defining compatible BG-colors along with BG images in your site's CSS.

Free Stuff

We hope you enjoy the free web design tools, tutorials, and other resources you find here.

Help Feed the Kitty

Your support helps us continue these efforts. Thank you.

If you find this site useful, we would appreciate it very much if you would place a link on your site to ours. Visit Free Link Exchange page.