News & UpdatesProgrammingWeb programming Store My Projects
Links
Affiliates

CSS Tutorial – 15 – Background

CSS tutorials

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

Background-color

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

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

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

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

Background-position

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 + 
                      left/center/right

Background

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> + 
             <background-position>
Recommended additional reading:
Sams - Teach Yourself HTML and CSS in 24 Hours