|
|
CSS Backgrounds |
Setting simple colored backgrounds on a page, or in any XHTML tag are very straightforward - you only need to set the background-color: attribute on the tag in question, and that tag will have the color you used as it's background. It's important to remember that if you're setting a background color on a tag, that you should make sure that the text is going to be readable on that background - it makes no sense to set your page background to be black, and then forget to change the text color to something that is visible on that black background. Here's an example of changing the background and text colors inside of a div tag - the same properties would be used to set the background and text colors for a whole page, by putting these properties on the body selector instead of the ID attribute of the div tag in the .css file.
This will produce the following:
One very important thing to note when setting text color is that the CSS property for it is just color - not "font-color", or "text-color".
Sometimes, instead of using just a solid color as a background, you may wish to use an image as the background for your page. There is a large set of tools in CSS for setting up background images in your pages, to allow you to not only have the standard infinite repeating background as with the body tag's background= attribute, but also to allow you to control where, and how the image repeats, or even if it repeats at all, and where it appears if it does not.
For the first example, a simple image background that repeats infinitely in all directions:
Sometimes however, you may want to have an image background with high contrast, which makes reading text on top of it difficult - the solution to this is to set another background behind the text itself, like this:
The border surrounding the paragraphs aids in differentiating them from the complex high-contrast background that was used.
Sometimes however, you may want a background that does not repeat - for example, a corporate logo hovering in the middle of the background behind the text - there are also options available for this:
In this example, background-repeat is set to no-repeat, meaning that the background should only show up once. Other values for this property are repeat, repeat-x, and repeat-y.
The background-position property allows us to determine where on the page the image should appear - there are two parts to the value, the horizontal and vertical placement. Thus center center means the middle for both, where top left or bottom right would place the image differently.
The background-attachment property allows us to detach the background from the text, so that it sits in the middle of the browser window, instead of being anchored to the middle of the displayed page. The value for it can be fixed as in the example, where it is fixed on the screen, or scroll, which makes it scroll with the text.
Lastly, if you are using a background image that will not be covering the whole screen, remember to set a background-color that fits properly with your background image!
Obviously, other combinations can be used, for example to place a background only behind your heading at the top of a page. It's a bad idea to do this with a background-attachment of fixed, as that can interfere with reading the text on your page.
Another use of partially repeating backgrounds can be to give the appearance of a fancy left (or right) margin on your page:
In the last example, a margin-left was used to keep the text of the page off of the fancy background on the left side.