Notes: The table contains most common CSS properties/values. The browsers might ignore some of the properties!
Most off the properties have 'initial', 'unset' and 'inherit' values:
Property | Value | Description | Comments |
---|---|---|---|
background-attachment | scroll | fixed | Sets whether a background image is fixed or scrolls with the rest of the page | |
background-color | [color] | Sets the background color of an element | |
background-clip | border-box | padding-box | content-box | specifies whether an element's background, either the color or image, extends underneath its border | |
background-image | none | [image] | Sets the background image for an element | |
background-position | center | bottom | top | left | right | [length] | [percentage] { 1, 2} | Sets the starting position of a background image | |
background-repeat | repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2} | Sets how a background image will be repeated | |
background-origin | border-box | padding-box | content-box | Background positioning area | |
background-size | {[length] | [percentage] | auto} {1,2} | cover | contain | Specifies the size of the background images | Contain: scales the image as large as possible. Image is letter boxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color. The image is automatically centered unless over-ridden by another property such as background-position.
Cover: scales the image as large as possible and covers the entire width or height of the container. |
background | Sets all the background properties in one declaration in the following order: background-color background-image background-repeat background-attachment background-position |