There are five background properties that can be used to set the background of an element. The background properties are listed in order as follows:
This specifies the background color of an area such as a page background, a table cell, a div block, a heading, etc. You can use a hex value (#ffffff), a named color (blue), an RGB value written as rgb(00,00,00), or use a value of transparent. You can apply a background color to an entire page by redefining the body tag or to other elements where you want a background color to appear.
The example below sets a white background color within the body tag using a hex color value:
This setting allows you to set an image as a background. There are only two settings for this attribute: none and url.
Setting the value to none is normally used when you want to remove an image that was previously set.
Using url requires that you specify the file location of your image as shown below:
The default setting for the background-repeat value creates a tiled effect so that your image repeats both horizontally and vertically to fill the space in which it is placed.
The settings include repeat, no-repeat, repeat-x, and repeat-y. No-repeat causes the image to appear only once at the position you set. Repeat -x makes the image tile horizontally while repeat-y makes it tile vertically.
This property sets the background position of the image relative to the element. Position values are as follows: top left, top center, top right, center left, center center, center right, bottom left, bottom center, and bottom right
A style rule using the background-position property would look like this:
Values for this property are scroll and fixed.
You can choose whether or not to have your background remain in a fixed position when the
page scrolls.
Fixed instructs the browser not to scroll the background with the rest of the elements.
Scroll is the default setting and instructs the background to scroll along with the other page elements.
Some properties, like the background property, are made up of several values. To reduce the size of your CSS file and also save some keystrokes as well as bandwidth, they can all be specified as one shorthand property.
For example, the background properties listed below...
...can also be written as
Shorthand properties exist for many items such as background, font, border, margin, and padding controls. It is important, however, that the values be listed in their specific order.
In the shorthand rule example, the background-color is first, followed by the background-image. The background-repeat is set to repeat-x so it will tile horizontally. There was no need to set a background-position since the default is top left. Because this background will scroll with the rest of the page elements, there was no need for a background-attachment value.
Any property that is omitted will use the default value.
