Page Background Color and Background Images - HTML

One of the easiest changes you can affect on your Web pages is to change the background color of your document. Most browsers use a white background, and specifying a different background color or a background image can easily make your document distinct.

Specifying the document background color

If you code your HTML against the transitional format of HTML, you can use the bgcolor attribute in the <body> tag. However, using that attribute is not recommended for the following reasons:

  • The attribute is not valid for strict HTML and might impair the validation of your document.
  • If you want to change the background color of your documents, you must change each individual body tag in each document.

A better practice is to use appropriate styles, typically in an external style sheet. The document background color is set using the background-color property. For example, to set the background color to blue, you would use the following style definition:

Specifying the document background image

Besides setting the background of the document to a solid color, you can also specify an image to use as the document background. As with the background color attribute for the body tag, there is also a background image attribute (background) for the body tag. However, as with the background color attribute, it is not a good idea to use that attribute. Instead, use the background-image property in the body style, as shown here:

The grid in the background of the document is courtesy of an image, grid.jpg.

The grid in the background of the document is courtesy of an image, grid.jpg.

For example, the following style results in grid.jpg being placed as the document’s background:

The effect is shown in above Figure.

Note:

When you change the background color to a dark color, or use a dark image, you should also change the text color so it will contrast with the background. For example, the following style sets the body background to black and the body text color to white:


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics