CSS Backgrounds
Here we've used the body tag as a selector but it could be table, td, span, div or many others. In this case
it will set the background color for a whole page. This paragraph has an in line style to set the color behind
the text.
<p style="background-color:#DDEEFF;">
The value may be a color name such as red, blue, green, black, well you get the idea. It can also be a hexadecimal value such as #FF0000 (red) or an RGB color- background-color:rgb(255,0,0); (also red).
The RGB value can be expressed as a integer (0-255), or as a percentage (0%-100%). The choice of what one to use is up to you and your needs. I won't go any deeper into the actual color values here. You're probably familiar with them already, if not there are plenty of sites that will explain them in depth.
I've deliberately made this monstrous image so the tiling effect of the image would stand out. This is the default property of a background image and may or may not be desirable. This very web page also has a tiling background. If your monitor's resolution is set to anything above 800 x 600 then you should see a column of dots on the right hand side. I use it as a filler for higher resolutions than what this page was designed for.
The background-image: is the property of course and the value is the path to the image file you want to use. It does need to be specified as I have it here with the url(path/filename);. In the above example the image, "myPicture.gif", resides in a folder called "images".
"That's just ducky", you say, "but what if I don't want my image tiled like that?" No problem, we just use the repeat part of the background property. Like this:
background-repeat:repeat-x;
background-repeat:repeat-y;
I won't go into a detailed explanation of each of these, you've probably already figured them out. I haven't shown the value "repeat" since it's the default and you'll get it just by specifying a background image."But", you say, "what if I don't want my image in the top left corner or tiled horizontally or vertically? I want to put my logo smack dab in the center of my page!". In this case, lets move on to the position part of the background property.
