Next / Previous / Contents / TCC Help System / NM Tech homepage

14. The background properties

These properties are used to display background images or colors behind other elements.

background-color

Sets the background color. Values may be:

background-image

Displays an image as the background. Use the url() function to select the image; see Section 6.4, “Universal resource identifiers (URIs)”.

background-repeat

When you use a background image and the image is not large enough to fill the space, the default behavior is to tile the image, that is, to repeat it in rows and columns.

You can control what happens in this case by setting the background-repeat property to one of these values:

  • repeat: This gets you the default behavior.

  • repeat-x: If you use this value, the image will be repeated horizontally, but not vertically.

  • repeat-y: The image will be repeated vertically, but not horizontally.

  • no-repeat: The image will not be repeated at all.

background-attachment

By default, when you scroll a page, the background image scrolls along with the content. To change that, set the background-attachment property to one of these values:

  • scroll: this is the default behavior.

  • fixed: the background stays in the same position in the browser window, as the the content scrolls.

background-position

Normally, a background image is positioned in the top left corner of the page. To change that, set the background-position property to two values from this list; the first value sets the x (horizontal) position, and the second the y (vertical) position:

  • Use a dimension (see Section 6.1, “Dimensions”) to specify the offset from the edge of the page: this is the distance from the left side for the x position and the distance from the top for the y position.

  • Use a number followed by a percent sign (%) to specify how far the image is shifted relative to the top left corner. A value of 0% aligns the image at the top or left edge; a value of 100% aligns the right or bottom of the image with the right or bottom of the page; and other percentages are placed linearly between these extremes.

  • center: If used for the x position, the image is centered horizontally; for the y position, it is centered vertically.

  • left: This value should be used only for the x position. It has the effect of moving the image all the way to the left.

  • right: Moves the image all the way to the right.

  • top: This value should be used only for the y position. It has the effect of moving the image all the way up.

  • bottom: This value should be used only for the y position. It has the effect of moving the image all the way down.

For example, this rule

  body { background-position: 50% 0.5in; }

would center the image horizontally, and move it down half an inch from the top edge.

background

You can specify all of the above properties in a single rule with the background property. The list of values for the property can include any of the values shown above for background-color, background-image, background-repeat, background-attachment, or background-position.

For example:

  body { background: 50% 0.5in scroll repeat-y maroon
         url(http://clip-arf.dog/schnauzer.gif); }