Background Panel Options in Dreamweaver’s CSS Property Panel

By Janine Warner

Using the Background panel in Dreamweaver’s CSS Designer panel, you can specify a background color or image for a style — and control how the background is displayed on the page. You can use background style settings for any element of your web page that can display a background — including the <body> , <div>, heading, and image tags.


For example, you could alter the <body> tag to include background settings that apply to the entire page, or you could create a style with the class or ID selector and specify a background that appears only behind an individual <div> tag.

By including the background in the class or ID style of a <div> tag, you can limit the background to appear on-screen only where the <div> tag is used. Note that the Background option works with an image only if you first set a margin around the image.

You can choose from these Background options:

  • Background-Color: Specify the background color of a defined style using one of several methods. You can click the color well and select a predefined color or create a custom color. Or use the eyedropper to sample any color on the screen. Finally, you can enter a hexadecimal color code — make sure to include the #, as in #000000 for the color black or #ffffff for the color white.

  • Background-Image: Select an image to serve as the background in your style definition. Enter any URL to an image on your computer or on the Internet, or click the folder icon to browse your hard drive and select an image.

  • Background-Position: Specify the position of the background image from the left and top of the parent element by entering a number in each field. This option is visible only if you click the small arrow next to the URL field in the Background section to reveal the additional fields that follow.

  • Size: Select the measurement in pixels, ems, or another option, and then enter the size you want for the background. Leaving the Size field set to auto (the default) displays the image at actual size.

  • Background-clip: Specify whether the background begins the border, the padding, or the content of a box element, such as a <div> tag.

  • Background-Repeat: Click the corresponding icon to specify how and whether the background image repeats, or tiles, across and down the page. Background images tile by default, so you must choose an option if you don’t want your background to repeat or you want to specify how it repeats.

    Also note that if the image is larger than the element to which it is applied, only as much of the image as will fit in the display area of the element will be visible. For example, if you use a 600-pixel-wide image as the background of a <div> tag that is set to 300 pixels wide, only half the image will be visible.

    The Repeat options, listed in order of the appearance of their icons, follow:

    • Inherit: Unless another option is selected, each element inherits the behavior of its parent element. This default option does not need to be specified.

    • Repeat: The background image repeats vertically and horizontally in the background of the element.

    • Repeat-X: The background repeats horizontally, but not vertically, in the background of the element.

    • Repeat-Y: The background repeats vertically, but not horizontally, in the background of the element.

    • No-Repeat: The background is displayed once at the top left of the element.

    • Origin: Specify whether the origin of the background begins at the border, the padding, or the content of a box element, such as a <div> tag.

  • Attachment: Determine how the background behaves when the page is scrolled. The options are

    • Inherit: Unless another option is selected, each element inherits the behavior of its parent element. This is a default option and does not need to be specified.

    • Fixed: The background remains glued to one place in the viewing area and doesn’t scroll out of sight, even when the web page is scrolled.

    • Scroll: The background scrolls along with the web page.

  • Gradient: Click the color well next to Gradient to open Dreamweaver’s new visual gradient selector.