These are the individual background properties in CSS.
background-color background-image background-repeat background-attachement background-position
The background-color property specifies the color of the element. This can be useful to specify if someone has turned images off and you want a non-default view of your content. You can use a hex value (#RRGGBB), a shortcut hex value (#RGB) or a named color (red, green,blue).
background-color: #fffffff;
The background-image specifies an image to place in the background of an element. Remember that the image should be supported by as many browsers as possible. This means using jpeg, pngs or gifs, not tifs or proprietary image formats.
background-image: url(images/someimage.gif)
The background-repeat property specifies how an image should display within an element. You can have it repeat across (repeat-x), repeat downwards (repeat-y) or not repeat (no-repeat).
background-repeat: repeat-x;
The background-attachmemnt attribute is used to specify if an image should scroll (scroll) with the page, be fixed (fixed) to the page or inherit position from a parent element (inherit).
background-attachment: fixed;
The background-position attribute is used to specify the starting position of an image. This can be useful if you are using a sprite to speed up loading times. The background-position attribute can take a Xpx Ypx argument, an X% Y% argument, named arguments(left top, right bottom,…) or inherit from the parent.
background-position: 50% 50%;
Here is an example of the use of these:
body {
background-color: #ffffff;
background-image: url(images/someimage.gif);
background-repeat: no-repeat;
background-attachment: fixed ;
background-position: left top ;
}
You can also use a short cut method to the background property.
.imagebox {
background: #ffffff url(images/someimage.gif) no-repeat fixed right top;
}
Tags: CSS, html, properties