Cascading Style Sheets (CSS); Backgrounds (part 1 of 2)
By Will Bontrager
2003-10-10
Reader Rating: 
Introduction
Background colors and images can be used for stylistic effects and can be an important element in the design of web sites.
With standard HTML, one can assign backgrounds to a web page and to tables and table data cells. Compared to what one can do with CSS, however, HTML is limited.
With CSS, background colors and background images can be applied in many different ways.
1. The web page's background, in any of the following manners:
a. Background color (like standard HTML).
b. Tiled image (like standard HTML), where the image is repeated across the top and row by row until the entire web page background is covered.
c. Not repeated, the image printed just once. The image can be positioned anywhere in the window.
d. Repeated across the top of the web page for one row.
e. Repeated along the left side of the web page for one column.
f. Fixed in position with the web page contents so the background image remains in place while the page content scrolls over the top of it.
2. The background behind divisions of the web page, within DIV tags.
3. The background behind tables.
4. The background behind sections of text content.
5. The background behind INPUT and TEXTAREA form elements.
6. The background behind ordered and unordered lists.
This article will address only web page backgrounds. Part two will address the others mentioned above.
Netscape 4.# does not position background images and it does not prevent the background from scrolling with the text. Other than those two considerations, the major browsers comply with the CSS presented in this part one.
You probably already know how to create background colors and background images with standard HTML. As a refresher, the color and/or image URL are specified in an attribute of the BODY tag. Here are the methods, the first a yellow background color, the second specifying a background image:
<body bgcolor="yellow">
<body background="image.jpg">
The bgcolor attribute provides the color, as expected. The background attribute provides the image, but tiled to cover the entire background of the window.
Copyright 2004 Bontrager Connection, LLC
If you found this article interesting, you may want to read these as well:
» Cascading Style Sheets (CSS); Backgrounds (part 2 of 2)
» Cascading Style Sheets (CSS); Learning More
» Cascading Style Sheets (CSS); Getting Started
|
