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.
- 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.
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.
Now, let’s see what you can do with CSS!
The CSS examples in this article are provided in the format used when the styles are defined in the HEAD area of a web page. For site-wide implementation, you can use an external file for the same effects.
See previous articles of the “Cascading Style Sheets (CSS)” series, “Getting Started” and “Learning More,” for more information about those two methods of defining CSS styles. The articles are linked from http://willmaster.com/possibilities/archives/
Background Color
Here is the method of specifying a page background color. For single page, put this in the HEAD area. For site-wide implementation, you’ll probably want to put the style into your external CSS file.
<style type=”text/css”>
<!–
BODY { background-color: yellow; }
–>
</style>
Changing the color name (or changing the #ffff00 hexadecimal equivalent), will change the background color of the one page or all pages using an external CSS file.
Tiled Image
This will put a background image into your web page, the image repeating across the top, row by row, until the web page background is covered.
<style type=”text/css”>
<!–
BODY { background-image: url(image.jpg); }
–>
</style>
The URL can be specified as relative or absolute. The following are all valid formats:
url(image.jpg);
url(graphics/image.jpg);
url(https://www.murdok.org/images/64cb5040f3143jpg);
Image Not Repeated, With Exact Positioning
This will print the background just once, placing it in the top-left corner of the web page.
<style type=”text/css”>
<!–
BODY {
background-image: url(image.jpg);
background-repeat: no-repeat;
}
–>
</style>
To position the image in a place other than the top-left corner, use the background-position label. For example, this will print the background image at the right-top of the web page.
<style type=”text/css”>
<!–
BODY {
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: right top;
}
–>
</style>
The words you can use for positioning are: top, bottom, left, right, center
Note that the above words apply to the entire web page, not just the browser window. Thus, “bottom” means the bottom of the page, not the bottom of the window.
Positioning can also be specified by distance measurement and by percentages.
This style will place the top left corner of the image 400 pixels in from the left page margin and 100 pixels down from the top page margin.
<style type=”text/css”>
<!–
BODY {
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: 400px 100px;
}
–>
</style>
And this style will calculate the distance 10% from the left and 20% from the top.
<style type=”text/css”>
<!–
BODY {
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: 10% 20%;
}
–>
</style>
Calculation is done using both the dimensions of the page and the dimensions of the image, the same percentage of each. The point 10% in from the left of the image will be placed at the point 10% from the left of the web page. And the point 20% from the top of the image will be placed 20% from the top of the web page. It can be a hard concept to grasp without a drawing. But try it, specifying different percentages until you gain an experiential understanding.
Background Image Repeated Across the Top of the Web Page
This style will repeat your background image across the top of the page, one row.
<style type=”text/css”>
<!–
BODY {
background-image: url(image.jpg);
background-repeat: repeat-x;
}
–>
</style>
Background Image Repeated Along the Left of the Web Page
This style will repeat your background image along the left of the page, one column.
<style type=”text/css”>
<!–
BODY {
background-image: url(image.jpg);
background-repeat: repeat-y;
}
–>
</style>
Background Image Does Not Scroll When Web Page Scrolls
To make your background image stay in place while the web page contents are scrolled over the top, use this style:
<style type=”text/css”>
<!–
BODY {
background-image: url image.jpg);
background-attachment: fixed;
}
–>
</style>
An Application
Let’s suppose you have a nice little image of a flower. You want it for a background, printed in a row along the top of your web page. The flowers should stay in their fixed position when the rest of the web page content scrolls.
It can be done this way:
<style type=”text/css”>
<!–
BODY {
background-image: url(flowers.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
}
–>
</style>
Knowing how to use and position background images can enhance web page design.
See part two, next week, for ways to use background colors and images in the web page content itself.
“WillMaster Possibilities” ezine
http://willmaster.com/possibilities/
mailto:possibilities@willmaster.com
