CSS Basics 105:Backgrounds + Cascading Rules
Home Tutorials Reviews Weblog

Review: CSS allows control over background colors and images in a number of ways
Feature: The whole exercise has to do with Cascading rules as well

One of the media that gets the most attention in the CSS specification, beyond text, is the use of images. And no more so than in their use with backgrounds. CSS actually provides a wide range of capabilities for managing both color and images in the background. On this web page I have used a background image applied to the body tag as is normally done. But because my other styling rules, osstyle.css, are applied after the <body> tag, they and their stylings take precedence over the <body>'s class="back2" styling. The net result is that the bulk of the review appears to hover over the body background.

Here is that CSS code:
.back2 {background-color:#CCbbbb; background-image: url(images/backcss.gif); background-repeat: repeat-y;}
And here is what I am trying to get it to do for me. First with background-color I am applying a reddish light gray tone which is applied over the whole background. But by adding the background-image option, the image backcss.gif is applied to the upper left of the Web page background covering over the reddish gray color. However, by adding the backround-repeat: repeaty-y I get CSS to repeat the image along the lefthand column (y-axis) of the Web Page. So I can place an image in the background, cause it to repeat as follows:
backround-repeat: repeat-y - repeats the image vertically (y-axis)down the page
backround-repeat: repeat-x- repeats the image horizontally (x-axis) across the page
backround-repeat: repeat- repeats the image in both directions so it fills the container(this is the default)
backround-repeat: no-repeat- uses no repeats and the image position defaults to the upper left corner
But as we have noted, the use of other tags like <p>, <table>, and others with their color styling taken from the osstyle.css file, these styling rules override the reddish background because they occur after the <body> tag.

In general, these styling precedence rules are being applied by CSS compliant browsers to all HTML tags combined with CSS stylings - so one can see why creating a browser is no longer a trivial exercise. With many styling statements, which rules "rule" is not a trivial matter to decide. For example, just below I add a row in the table with a new background image and color. Yes it is possible to add many different background images to a web page by <div> or <table> or any other HTML tag container:

This uses the following .back3 styling:
.back3 {background-color:#CCCCff; width:790px; color:white; background-image: url(images/graycss.gif); background-repeat: repeat;}
The HTML looks like this:
..<tr><td class="back3"> ...</td></tr>...
Note I have used the background-repeat: repeat option so that the new image, graycss.gif, is repeated in both directions completely filling the table row both vertically and horizontally. However, I have set a width maximum of 790px to correspond with the table width maximum of 790px. Also I have specified that the text color be white (color:white) so that you can read this text on a dark background.


However this does not exhaust the control over background images that is available in CSS. The option background-position allows users to position a background image (best used for repeat-x and no-repeat images) in its container. This works with any HTML container but best with the <body> tag. Here are the settings which you should add to your background stylings:
background-position:left bottom- this positions the image in the left and bottom of the container;
background-position: center top - this positions the image on the center top of the container;
background-position:right - this positions the image on the right and center of the container;
background-position:80% 20%- this positions the image in 80% ffrom the left and 20% from the top;
Note the last positioning takes two numeric values; the first value is the x-axis positioning starting from the left; the second is the y-axis positioning. These numeric positioning can be in lengths like 20px or 50px as well. All of the above positionings are demo-ed below just click here.

Background Attachment

Users can control whether the background image will stay fixed or scroll (the default) as usual with display window view. Use the background-attachment=fixed property to change the images behavior. This works best in simple no-repeat and repeat-x type backgrounds that have been attached to the body or some other large container. It is often used to maintain a constant logo image fixed in the background. But a caution is worth noting, when I have demonstrated this feature to clients, some are distinctly against it. One said - "it is like all those blinking, winking fields from the early days of the Web - not for us." So with that caution I continue to a warning.

A Warning Note

Two warning notes about use of backgrounds. First, one can specify a width= and height= when using background stylings as I have done here. However, I found that the various browsers treated these attributes differently. So Safari and Opera would respect heights and widths by overlaying as expected any underlying background; but Firefox would pushdown some of the overlaying regions while IE pushed down or overlayed depending on the second or third tags used. Second, when #identity styles (id=) were used with backgrounds, the variations among the browsers as how to how multiple background images would display was quite wide. So extra caution is required when using background images with the identity stylings. Bottom line - if you use multiple background images, be sure to check out their display in the various browsers to make sure you get the desired uniform results.

Summary

This tutorial has summarized the properties and effects available in CSS to manage background images and colors not just on the body of your Web page; but anywhere in between. Use background images in <table>, <div> or just about any other tag. However, caution is advised to check when multiple background images are used, make sure all browsers show the desired results uniformly. Fortunately, I can say for this page all 4 Windows browsers (Firefox, IE6, Opera and Safari) were able to handle all our CSS Styles.

Finally there are a number of ways to decorate and display not just images but also animations and applets in CSS. Also we shall cover some simple coding to display and hide images/animations. All of these issues shall be discussed in an upcoming tutorial. In the meantime, check in the bookCSS in Easy Steps by Mike McGrath for coverage on background syntax on pages 140-145. Beginning CSS by Richard York, covers the topics on pages 362-379.




Top of Page  Home  Tutorials 

Developers Weblog  Graphics Reviews and Tips

Background position set to LEFT BOTTOM

Background position set to CENTER TOP

Background position set to RIGHT CENTER

Background position set to 80% 20%