Search this site

 

Background Images Explained

Background images, wallpaper or stationary as it is sometimes called, can add spice to your web pages. Used correctly and with text of adequate size and contrast, background images can be an effective site motif. Avoid using busy or complicated backgrounds within 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 behind a solid or semi-transparent content division, as in this OPACITY 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 tile or repeat vertically, horizontally, both or none. So a little image can go a long, wide or short way.

The Big Background Image Dilemma

A common mistake among new web designers is trying to "fit" content precisely over a large, background image or photograph. This seldom works as planned because building for the web is nothing like designing for print. Owing to different browsers, user settings, text and display sizes which you cannot control, the web is an inherently flexible medium - a bit like Jell-O. And no matter how hard you try, you simply cannot nail Jell-O to a wall. Neither can you place web content precisely over a big background image and expect it to stick.

Following are links to some sample pages with big background images. You'll see that it can work in some but not all situations.

• Fixed Background (non-scrolling, no-repeat)
• Vertical Repeat (scrolling)
• No-Repeat (scrolling)
• Multi-Scrollbars (no-repeat)

Using BG colors with BG images

This may seem silly at first but what if your background image fails to load? Or perhaps your site visitor has disabled background images in their 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 to 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.