Beginning HTML - Home
Introduction - What is HTML, What it can do, what you'll need, etc. The Basics - First steps in HTML. Moving On - Further concepts. Advanced - More advanced ways to use HTML. Glossary - Explanation of terms used in this site HTML Tag and attribute reference - look up the most popular tags and their common attributes for reference
Square Moving On
square Backgrounds
Square Images
Square Links
Square Lists
Square Tables (Part One)
Square Tables (Part Two)
Square Tables (Part Three)
 
How to change the color of the background
How to use an image for the background
How to make a non-scrolling background

How to change the color of the background

The background of a page can be set using the background attribute of the body tag. Using this, the background can be set to a particular color (rather than the default white), or as a tiled image.
Care should be taken when choosing a background color or image, as to the readability of the text. For example, dark blue text on a black background can be very difficult to read. Likewise, complicated or bright colored background images are distracting and irritating to the user.
A good background image, if used at all, should be subtle enough to allow the user to clearly and easily read the text on the page.

The color of the page background can be set as follows -
<body bgcolor="red">
As above, this could be a word to describe the color (e.g. blue, green, etc.), or it could be the RGB color, e.g.
<body bgcolor="#000000">
In this example the background color has been set to #000000, which is black.

How to use an image for the background

To use an image for the page background, you must first have a suitable image ready, in either .gif or .jpeg format. .bmp format will only appear using Internet Explorer. The image should be reasonably small, and needs to be one that 'tiles' (repeats) smoothly when it's repeated across the page. The color of the text (and also links) on the page needs to be taken into consideration when choosing the color/s of the image.
To use an image as the background, use the following code -
<body background="image.gif">
where 'image.gif' is the filename and extension of your image. If the image is stored in another directory to the HTML files for your page, you would need to include the path to that directory, for example -
<body background="images/image.gif">

How to make a non-scrolling background

Normally if a background image is used, when the user scrolls the page, the background image moves accordingly. This can be overwritten (in Internet Explorer 3+ only), by adding
properties="fixed"
to the body tag. For example -
<body background="logo.gif" bgproperties="fixed">
The background then stays static when the user scrolls. An example of this effect is here

Web pages wouldn't be much fun without graphics/images in them. Let's move on and see how to do just that.

TopTop of page - BackBack to Moving On - Next - ImagesNext

Introduction - The Basics - Moving On - Advanced - Glossary - Reference