|
 Cascading Style Sheets (CSS); Backgrounds (part 1 of
2)
By
William
Bontrager
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.
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(http://domain.com/pictures/image.jpg);
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 for ways to use background
colors and images in the web page content itself.
Will Bontrager
About the Author:
William
Bontrager Programmer/Publisher, "WillMaster Possibilities"
ezine
mailto:possibilities@willmaster.com
Are you looking for top quality scripts? Visit
Willmaster
and check out his highly acclaimed Master Series scripts. Some free, some
for a fee. |
Web
Development
