Background:CSS Properties

background-color: #000;
Pretty obvious on what this means.


background-image: url(image.jpg);
url is literally url. However the word image.jpg should be the name of the image you wish to use.

background-repeat: no-repeat;
This stops the browser from repeating the image used. You may also use repeat, repeat-x or repeat-y inplace of no-repeat to have the image repeat itself. repeat-x meaning repeating horizontally, repeat-y meaning repeating virtically.

background-attachment: fixed;
Using fixed will make the background not move when you scroll the page. When exchanging the word "fixed" for "scroll" the background will move.

background-position: 50px 50px;
Using this puts your background at a specific position. You may use pixels or percentages to place the background by horizontal position first then virtical following. Or, you may use one of these:

• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right

Background Shortcut
The background shortcut is when you may use all or some background styles. To use the background shortcut, write it in this order:

1. color
2. image
3. repeat
4. attachment
5. position

Example: background: { #000 url(bg.jpg) no-repeat fixed center center; }