The background-color property property is used to set up the background color of the box.
The possible values for css color specifications are:
| Values | Description |
|---|---|
| named color | blue |
| rgb/ hsl | rgb(100, 200, 0) |
| hexadecimal | #00ff00 |
| transparent | default |
The background-image property is used to set the background image of the box.
The possible values are URIs that points to the valid image (gif, jpeg, png)
url('image.gif')
url('http://www.quotefellas.com/quote.jpg')The background-position property is used specify the top and the left of the background image relative to the top and the left of the element box.
The possible values are.
| Properties | Description |
|---|---|
| <percentage> | |
| <length> | |
left | center | right | for horizontal direction |
top | center | bottom | for vertical direction |
background-position : 30px 50px /* first value applies to horizontal direction, second value apply to vertical direction*/ background-position : left bottom background-position : 10% /* applies to both the vertical and horizontal direction.*/
The background-position-x is similar to background-position. It applies to horizontal direction in internet explorer only.
The background-position-y is similar to background-position. It applies to vertical direction in internet explorer only.
The background-repeat property allows to specify how the background image is repeated.
The possible values are.
| Properties | Description |
|---|---|
no-repeat | only one instance of image will be rendered. |
repeat | the image is rendered in both horizontally and vertically. |
repeat-x | the image is repeated only horizontally. |
repeat-y | the image is repeated only vertically. |
The background-attachment property is used to specify whether or not the background image scrolls with the document.
The possible values are.
| Properties | Description |
|---|---|
fixed | the image is fixed relative to the view-port |
scroll | the image is fixed relative to the document, and the two will be scrolled together (the default value) |
The background property is a shortcut that can be used to set the background-image properties.
background: <background-attachment> <background_color> <background_image> <background_position> <backgound_repeat>
Both the background-color and background-image can be rendered simultaneously.
