Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

Adding a background picture

Some browsers can load a picture and use it as a background for the page. Some people like this; some people don’t.

It is easy to include a background picture, just use the background attribute in the <body> tag:

<body background="bkgimage.gif">

The browser tiles the picture until it fits the window and then displays the rest of the page's text and graphics on top. So, make sure that if you do include a background picture, you can still read the text easily.

Background pictures can be a texture (linen finished paper) or perhaps a logo.

The background picture replaces the background colour if the browser loads the picture successfully. If not, the browser uses the background colour as a background to your web page. In addition, the background colour appears while the browser loads the background picture.

The background image scroll when you scroll down the page, unless you set it to be fixed:

<body background="bkgimage.gif" bgproperties="fixed">

Note: I think this only works in Internet Explorer not in Netscape.

Some things to think about:

  • Don't use complicated pictures with bright colours. Keep it plain and simple
  • Make sure the colours that you use for text don't blend into the picture
  • Don't use an enormous picture that takes ages to load. The browser can't display any other text or pictures on your page until it has finished loading the background picture
  • Make sure your page looks good without the background picture. Some people disable picture loading to speed things up
  • Don't have an animated background picture. They are distracting and not all browsers can display them