CSS Backgrounds
Before we begin, since you might want to try some of these things on your own, here's a link to a web page template. It should open in a new window and you can copy and paste it into a text editor. Just save it with an .html extension.
It contains commented out sections for both external style sheets and embedded. All you have to do is remove the HTML comment tags <!-- & --> to make whatever section you want to use active. Then save it with a new file name so you don't overwrite your template, again with an .html (myFile.html) extension. For linked external style sheets use the one with the media="screen" attribute on the end. The other is for printing the page which requires a different style sheet to get rid of all the stuff you don't need to waste ink on.
| Property | Value | Description | N.N. | I.E. |
|---|---|---|---|---|
| background-color: | Color name Hexadecimal value RGB value |
Specify background colors for pages, tables, divisions, behind text, ect... | 4.0 | 4.0 |
| background-image: | url(path/file_name) | specify an image for the background | 4.0 | 4.0 |
| background-repeat: | repeat repeat-x repeat-y no-repeat |
Sets if and how an image will repeat | 4.0 | 4.0 |
| background-position: | top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos |
Set the position of the image in relation to the top-left corner of it and it's element | 6.0 | 4.0 |
| background-attachment: | scroll fixed |
Set weather an image scrolls with the page or remains fixed | 6.0 | 4.0 |
| background: | A mix of the above | Allows different values to be combined into one property | 6.0 | 4.0 |
|
||||
Look this table over well. You'll be seeing one's like this in the rest of the sections. Type the properties just as they appear. Some of the values will need a little more explaining so you can properly use them. There's a short description of what each one does and a list of two major browsers and what versions of them support the property.
The last property is a shortcut to combine multiple properties into one. Not all properties may be combined successfully and other times you may have to adjust the order of the values to get them to work right. Beats typing all those properties if you don't have to.
Now with that all said, lets move on to an explanation of the different properties, their values and how to use them.
