Thursday, April 1, 2010
Page Background Color and Background Images
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:
<style>
body { background-color: blue; }
</style>
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:
<style>
body { background-image: url(path_to_image); }
</style>
For example, the following style results in grid.jpg being placed as the document’s
background:
body { background-image: url(grid.jpg); }
</style>
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:
body { background-color: black; color: white; }
</style>
Currently have 0 comments: