Section A.5. Backgrounds | Dreamweaver CS3: The Missing Manual

A.5. Backgrounds

CSS provides several properties for controlling the background of an element, including coloring the background, placing an image behind an element, and controlling how that background image is positioned.

A.5.1. background

Provides a shorthand method of specifying properties that appear in the background of an element, like a color , an image, and the placement of that image. It combines the five background properties (described next ) into one compact line, so you can get the same effect with much less typing. However, if you don't set one of the properties, browsers use that property's normal value instead. For example, if you don't specify how a background image should repeat, browsers will tile that image from left to right and top to bottom (see Section 8.3).

Values : The same values used for the background properties listed next. The order of the properties isn't important (except for positioning as described below) but usually follow the order of background-color , background-image, background-repeat , background-attachment , background-position .
Example : background: #333 url(/books/2/835/1/html/2/images/logo.gif) no-repeat fixed left top ;

A.5.2. background-attachment

Specifies how a background image reacts when your visitor scrolls the page. The image either scrolls along with the rest of the content or remains in place. You can add a logo to the upper-left corner of a very long Web page, using the background-attachment property's fixed value, and make that image stay in the upper-left corner even when the page is scrolled. (In Internet Explorer 6 and earlier, this property works only for the <body> tag.)

Values : scroll or fixed . Scroll is the normal behavior: An image will scroll off the screen along with text. Fixed locks the image in place.
Example : background-attachment: fixed ;

A.5.3. background-color

Adds a color to the background of a style. The background sits underneath the border and underneath a background image, a fact to keep in mind if you use one of the non-solid border styles like dashed or dotted . In these cases, the background color shows through the gaps between the dashes or dots.

Values : any valid color value (Section A.1).
Example : background-color: #FFF ;

A.5.4. background-image

Places an image into the background of a style. Other page elements sit on top of the background image, so make sure that text is legible where it overlaps the image. You can always use padding to move content away from the image, too. The image tiles from left to right and top to bottom, unless you set the background-repeat property as well.

Values : The URL of an image.
Examples : background-image: url(/books/2/835/1/html/2/images/photo.jpg); background-image: url(http://www.example.org/photo.jpg );

A.5.5. background-position

Controls the placement of an image in the background of a page element. Unless you specify otherwise , an image begins in the element's top-left corner. If the image tiles, background-position controls the image's start point (see background-repeat next). If you position an image in the center of an element, the browser puts the image there, and then tiles the image up and to the left and down and to the right. In many cases, the exact placement of an image doesn't cause a visible difference in the background tiling, but it lets you make subtle changes to the positioning of a pattern in the background.

Values : You can use any valid CSS measurement unit like pixels or ems, as well as keywords or percentages. The values come in pairs, with the first being the horizontal position, and the second being vertical. Keywords include left, center , and right for horizontal positioning and top, center , and bottom for vertical. Pixel and em values are calculated from the top-left corner of the element, so to place a graphic 5 pixels from the left edge and 10 pixels from the top, you'd use a value of 5px 10px .

Percentage values map one point on the image to one point in the background of the element, calculated by the specified percentage from the left and top edges of the image and the specified percentage from the left and top edges of the element. 50% 50% places the point that's 50 percent across and 50 percent down the image on top of the point that's 50 percent across and 50 percent down the element. In other words, it puts the image directly in the middle of the element (see Section 8.4.3). You can mix and match these Values: If you want, use a pixel value for horizontal placement and a percentage value for vertical placement.
Examples : background-position: left top; background-position: 1em 3em; background-position: 10px 50% ;

A.5.6. background-repeat

Controls whether, or how, a background image repeats. Normally, background images tile from the top left to the bottom right, filling the element's entire background.

Values : repeat, no-repeat, repeat-x, repeat-y . The repeat option is the normal methodtiling left to right, top to bottom. No-repeat places the image a single time in the background with no tiling. Repeat-x tiles the image top to bottom onlyperfect for adding a graphical sidebar. Repeat-y tiles the image from left to right only, so you can add a graphical bar to an element's top, middle, or bottom.
Example : background-repeat: no-repeat ;