Background Style
Written
Author
Background colors and images can be placed as a main page background, a table or cell background, or even a text background.
Both of the background-color and background-image properties can be specified for ANY regular HTML tag.
Background Color
background-color is used to specify the main background color of the page. It can also be used on regular or linked text.
This shows how to declare a WHITE background for the main page area using embedded CSS:
Now, add in a command line that will create a red background color for any text within an h3 tag set:
And add in a CLASS command to create a BLUE background when it is used in the main BODY code area:
The main area of the page will be white. Any text or objects within an h3 tag set will now have a red background behind them. Any text or objects within an HTML tag using the class="blueback" will have a blue background behind them.
Background Image
Images can be used for backgrounds as well. They can be used behind text or objects as well as the main background.
Using the example from above, add in an image to show as the background. Since there are some non-image capable browsers, it's best to leave the color property in as well.
Adding another property to the same is allowed. Just separate them with a semi-colon and space. You can have them on the same line, or on the next line as seen in the example.
There is a url( ) area. If the image is in the same directory as the page, you can use just the image name, or you can specify the complete URL of the image.
Now add in another CLASS type to create an image background when it is used in the main BODY code area:
Any text or objects within an HTML tag using the class="imgback" will now have an image background behind them.
With all backgrounds, be sure to use one that will allow the text to stand out and be seen easily. Nothing is worse than getting to a site and not being able to read the text over a distracting image.
Repeating
Normally, the background "tiles" the image. It repeats the specified image both horizontally and vertically. This can be controlled using the background-repeat property. The values for this property are repeat-x, repeat-y, and no-repeat.
- repeat-x: tiles the image across left to right only.
- repeat-y: tiles the image top to bottom only.
- no-repeat: will cancel any repeat of the image.
This example shows how to produce a left side image border using the embedded CSS.
Or it can be shortened to:
Position
Normally, a background image will start at the top left corner of the window. This may be controlled using positioning.
The example above shows values that would adjust the background image to the same as it normally would. The first position value can be set to top, center, bottom, percentage, or pixel setting. The second position value can be set to right, center, left, percentage, or pixel setting.
Fixing (Sticky)
Normally, a background image will move along with the scrolling of a page just like any text or image does. This may be controlled in IE 4+ viewers using a fixed setting.
This probably works in Netscape7+ as well. Any version below that doesn't support a fixed background.
Grouping
The background properties can be grouped together into one command. Grouping may cause confusion in some browsers. Sometimes it's just a matter of changing the order in which the properties are listed in the command. Trial and test everything in different browsers to ensure the best results.