Background
This is the first of what I hope to be a series of entries about various important CSS elements essential in blogger templates. So I am going to start with the ever present background element
Why Use Background
There are basically two ways to insert an image into HTML, one by applying the image as foreground using <img> tag or background using background CSS style. Generally you would use background if there will be text on top of the image or the image is very small and part of the decorative element. Otherwise, for the content of your web page use the <img> tag.
Background Properties
There are five basic background properties:
Background Color - color hex / color rgb / color name / transparent
The default property is transparent. The other three choices are different ways to express color on the web. An example of hex is #000000 or #000, rgb is rgb(0,0,0), color name is black. Background color is often used in combination with background image to save image size.
Background Image - url / none
The default value for background image is none. The url property is used to link the background image to an existing picture.
Background Repeat - repeat / repeat-x / repeat-y / no-repeat
As the name suggests background repeat determines if the image applied to the background should repeat or not. This property is also used to save image size and can be seen in Neuschwanstein where the entire background is a repeated tile. The default property is repeat while the three other value are pretty self explainatory repeat-x mean repeat along the x axis (left-right only) repeat-y mean the y axis (up-down only) and no-repeat means no repeat.
Background Attachment - scroll / fixed
The default property is scoll which means the background image will scroll with the scroll bar while with the fixed property the image will always remain on the screen no matter how far down the screen you go.
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
The background position is used in combination with your background image, it dictates where the image will start. The values it take are listed above and the numerical values goes left-right first then top-bottom.
Finally there is the Background: property is self, it takes all of the above background properties recommended in the order they are listed, saving a lot of precious time :)
