This is the background image that is used in the following example. When you display the
page, note how the browser tiles it by repeating
it over and over both horizontally and vertically when you display the page.
| Home Web | Top Bottom | Contents Prev Next |
In the <body> tag, you can specify a background color and/or a background image for your page. If you want your background to be a solid color, just specify a background color. If you want to use a background image, specify BOTH a background color AND the background image, and make the background color as similar as possible to the background image. The reasons for this are:
The background color is displayed immediately, but there may be a delay before the background image appears. By making the colors similar, the user doesn't get as big a shock when the image appears, and you know that the text will be readable against the chosen background color as well as against your background image.
Some users may be surfing with images disabled, or their browsers might not be able to fetch the background image for some reason.
The bgcolor attribute of <body> specifies the background color. You can
use the 16 color names (bgcolor="red") or you can use a # followed by a
6-character hex code (bgcolor="#ffcccc") just like we did with the color
CSS property. You'll want to refer to a color chart when choosing your background colors.
Here's the link to my color chart (opens in a new window):
Larry's color charts
The background attribute of <body> specifies the background image. Code the value just like you would a src attribute of <img>.
This is the background image that is used in the following example. When you display the
page, note how the browser tiles it by repeating
it over and over both horizontally and vertically when you display the page.
Here's an example of a web page that includes a background color and image. Things to try:
There are some additional backgrounds available named canvas01.jpg through canvas09.jpg (there's no canvas10.jpg). Try a couple of these. Is the text readable?
Try canvas10.jpg. What happens when the background image can't be found?
Try deleting the background attribute and try several different background colors.
The <body> tag also has attributes for setting the text colors for the page. These attributes are:
text Specifies the color of all text except link text
link Specifies the color of link text for an unvisited link
vlink Specifies the color of link text for a visited link
alink Specifies the color of link text while the mouse button is
pressed while over the link
The text color defaults to black. The link color defaults to blue. The vlink color defaults to purple. The alink color defaults to red. If these colors don't work well with your chosen background color/image, be sure to specify values for these attributes. If you're using CSS to specify the colors for your text, be sure to include the <body> attributes as well — non-CSS browsers will recognize the attributes in the <body> tag but will not recognize the colors in your CSS.
Here is an example that shows how these attributes can be used. Things to try:
Try different combinations of background images and colors with different colors for the text and links.
The link to images07.html is a visited link (it's pointing to this page). The link to xxxx.html is not a visited link (it doesn't even exist). Notice the active color that appears when you depress the mouse button over a link (if you drag the mouse away from the link before letting it up, the browser won't try to access the link).
Try validating this code.
Try changing the doctype to strict (remove " Transitional") and validate it again. The attributes of the <body> tag are all deprecated and cannot be used in strict.
| Home Web | Top Bottom | Contents Prev Next |