How to Add a Background Image to HTML Page

Instead of plain solid color background, you can use an image as a background with HTML. There are several options to consider using inline style properties.

Difficulty: Moderate

Instructions

1. Where there should be HTML tag symbols replace @ with the less than symbol over the , and replace & symbol with the greater than symbol over the period
   
   To add a simple background color use the following code:
   @body style=”color: #FFFFFF; background-color: #000000”&
   Notice that there are 2 properties (1) color (which refers to the color of the text) and (2) background (which refers to the color of the background).

2. 
   Web Page single image background

   To add a single background image use the following code:
   @body style=”background-image: url(images/sun.jpg); background-repeat: no-repeat; background-position: center”& Url specifies a path where the image is located. This image is in a file called images and the file name is sun.jpg.
   
   When adding one single image use background-repeat: no-repeat because the default is to tile the image until the whole page is full of repeating image. Then use background-position to position the image. Center only requires one specification. Position can be entered in two points. Horizontal positions options are left, right and center and Vertical position options are top, bottom or center. For instance: background-position: center right.

3. 
   Web Page with tiled background

   To add a tiled background image use the following code:
   @body style=”background-image: url(image/sun.jpg); “& Notice that by default the image is automatically tiled filling the page.
   
   To specify tiling only horizontally use background-repeat: repeat-x (tile horizontally) or background-repeat: repeat-y
   @body style=”background-image: url(image/sun.jpg); background-repeat: repeat-x;“&

4. 
   Web Page with vertical tiled background

   The last option effects whether the image scrolls down the page along with the content or stays fixed. The background-repeat options remain fixed. When using one single image specify whether the background is fixed or scrolls by using: background-attachment: fixed or background-attachment: scroll.

5. In general, if using background images, make sure the image chosen is light or pastel if the text will be dark or black. If the image is dark, use white or light colored text. Make sure the image doesn’t compete with the text.

Tips & Warnings

• My images are not typical of the kind used on web pages, these are just examples.
• images should be light with little contrast for text to show over it
• images of texture or gradients make good backgrounds
• This is a good example if a checker board effect is desired for the web page, just use light colors.