Web Page Backgrounds

People new to web design are often looking for exciting web page backgrounds. They think that a really sharp background is just what they need to make their site stylish. Think again. For basic web design tips for beginners see: Web Design Basics.

A really plain background is what you should be searching for (or creating yourself). You don't want to distract your visitor from your content. Or, even worse, if you choose a background that is too busy or too loud it can make your text hard to read.

In other words, what you are trying to say or show on your website is important. Don't muck it up with a cheesy background.

If you are using a special background (other than white) it's best to use a tiled and seamless background.

Tiled means that if you put the image in the background of your web page it will be displayed over and over again across the whole web page a row at a time until the entire page is covered. In other words, like tiles on a floor.

Seamless means that you really can't tell where one tile ends and the next one starts. It looks smooth across the background of your web page.

Add a Tiled, Seamless Background to Your Webpage

  • Click web page backgrounds and pick one of their free seamless tiles.
  • Pick a background that will work with your page that is fairly light and plain if you are going to have black or dark text. A lot of the tiles I saw there were too busy for most web pages. Some were perfect! Don't pick a tile just because you like its beauty. It may be a pretty tile by itself but the question is will it be a good background.
  • Right click the tile you have chosen from the above site and select Save Picture As… (Ctrl + click for a mac).
  • Save the file to the same directory (folder) where your web page is. Name it whatever you like but don't change the file extension (like jpg or gif).
  • Add into the body tag of your web page the attribute: background="the name of the file you just saved". It will look something like this:
  • <body background="the name of the file you just saved">
  • Of course don't remove any attributes (if you have them) from the body tag. Just add the above.
  • Now save the web page and open it in a browser.

See? It should be tiled across the background of the whole page. Does it look good? Is it too busy? Does it make it hard to read the text on your page? These are questions you need to ask yourself.

Creating your own tiled and seamless background takes a little more work but it's really not necessary. There so many free background 'tiles' on the web that a workable one is always easy to find. Just follow the above steps and you are good to go.

Hope this gives you a good idea of how to select and use web page backgrounds for yourself. Truthfully, white (with black letters) should always be your first option. If it's fitting for the page or site you're working on add a background, but be sure to use a "light" touch. Here are more free web page backgrounds.

Website Building Tip

If you are a beginning web designer and you are designing a website for your business you should probably not use background textures or patterns.

A web page background is not necessary. It takes a light tough and some skill to add a textured or patterned background in a way that is not distractive to a site.