HTML Backgrounds

A good background makes the site look particularly great.

Example

Goodly matched background and color
An example of a good combination of background color and text color, making the text on the page easy to read.
Badly matched background and color
An example of a bad combination of background color and text color, making the text on the page difficult to read.

(More examples can be found at the bottom of this page)

Backgrounds

<body> Has two tags for configuring the background. The background can be a color or an image.

Background Color (Bgcolor)

The background color attribute sets the background to a certain color. The attribute value can be a hexadecimal number, an RGB value, or a color name.

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

The above code sets the background color to black.

Background (Background)

The background property sets the background to an image. The value of the property is the URL of the image. If the image size is smaller than the browser window, the image will be copied across the entire browser window.

<body background="clouds.gif">
<body background="http://www.codew3c.com/clouds.gif">

The URL can be a relative address, such as the first line of code. It can also be an absolute address, such as the second line of code.

Tip:If you plan to use background images, you need to keep the following points in mind:

  • Does the background image increase the page load time? Tip: Image files should not exceed 10k.
  • Is the background image well coordinated with other images in the page?
  • Is the background image well coordinated with the text color in the page?
  • Does the image look good when tiled across the page?
  • Is the attention of the text distracted by the background image?

Basic Considerations - Useful Tips:

The background color (bgcolor), background (background), and text (text) properties in the latest HTML standards (HTML4 and XHTML) have been deprecated. W3C has removed these properties from their recommended standards.

You should use Cascading Style Sheets (CSS) to define the layout and display properties of HTML elements.

More Examples

Highly Accessible Background Image
Examples where background images and text colors make page text easy to read.
Highly Accessible Background Image 2
Another example where background images and text colors make page text easy to read.
Poorly Accessible Background Images
Examples where background images and text colors make page text difficult to read.