The color property describes the foreground color of an element.
For example, to make all <h1> headlines in a document dark red.
Colors can be entered as hexadecimal values (#ff0000) or you can use the names of the colors (red) or rgb values (rgb(255,0,0)).
The background-color property describes the background color of elements.
The element <body> contains all the content of an HTML document. Thus, to change the background color of an entire page, the background-color property should be applied to the <body> element. You can also apply background colors to other elements including headlines and text.
The CSS property background-image is used to insert a background image.
To insert the image as a background image for a web page, simply apply the background-image property to <body>and specify the location of the image.
By default, the image is repeated both horizontally and vertically to cover the entire screen. The property background-repeat controls this behaviour.
The property background-attachment specifies whether a background picture is fixed or scrolls along with the containing element.
A fixed background image will not move with the text when a reader is scrolling the page, whereas an unlocked background image will scroll along with the text of the web page.
By default, a background image will be positioned in the top left corner of the screen. The property background-position allows you to change this default and position the background image anywhere you like on the screen.
There are numerous ways to set the values of background-position. All of them are formatted as a set of coordinates. The coordinates can be indicated as percentage of the browser window, fixed units (pixels) or you can use the words - top, bottom, center, left and right.
The property background is a short hand for all the background properties. With background you can compress several properties and thereby write your style sheet in a shorter way which makes it easier to read.
background-position: right bottom;
Using background, the same result can be achieved in just one line of code:
background: #FFCC66 url("globe.gif") no-repeat fixed right bottom;
The list of order is as follows:
If a property is left out, it will automatically be set to its default value.