News & UpdatesProgrammingWeb programming Store My Projects

CSS Tutorial – 15 – Background

The background properties can add background effects to elements. None of these properties inherit and they can be applied to all elements.


Background-color sets the color of an element’s background and will by default have its value set to transparent.

background-color : transparent | <color>


Background-image specifies an image to use as a background. Note that it uses the CSS url function to set the image location. This function evaluates the specified URL relative to the location of the CSS file.

background-image : none | url(<url>)


Background-repeat will by default make the background image repeat itself. It can also be set to only repeat horizontally (repeat-x), vertically (repeat-y), or not at all (no-repeat).

background-repeat : repeat | repeat-x | 
                    repeat-y | no-repeat


Background-attachment can be set to make a background image fixed, instead of scrolling along with the rest of the page which is the default.

background-attachment : scroll | fixed


The Background-position property is used to position a background image, with one value for vertical placement and one for horizontal. They can both be set to a length or a percentage of the element’s size. Negative values are allowed. There are also some predefined values: top, center, bottom for vertical placement and left, center, right for horizontal placement.

background-position : <length> <length> | 
                      <percentage> <percentage> | 
                      top/center/bottom + 


The background property is a shorthand property for setting all background properties in one declaration. The order of the values is irrelevant since there is no ambiguity between them. Any one of the values may be left out.

background : <background-color> + 
             <background-image> + 
             <background-repeat> + 
             <background-attachment> +