Use color, graphical, or gradient backgrounds

While plenty of websites use plain white backgrounds, others will use colors, graphics, or gradients to fill in some of the white space beside the wrapper. Doing so is, of course, optional, but you might find this area is a place where you can express some personality and work in other colors or images into your site design.

To set the page background to a different color

  1. In the CSS Designer panel, under Sources, click your style sheet file.
  2. Under @Media, click GLOBAL.
  3. In the CSS Designer panel, under Selectors, click the body rule.
  4. In the CSS Designer panel, under Properties, click the Background button Background button.
  5. In the background-color box, type or select a color for the desired background color. This color will extend into any blank areas on the page, depending on your type of layout. If you completed the section above, the color should not extend into the .container area.

To use a tiled graphic for the page background

  1. Locate an image you would like to use for the page background. The best images to use are those that tile.

    Caution Always check the site's terms of service to ensure that the images are free and legal to use for your site's purpose!
  2. Save the desired image to the images folder of your website.
  3. In the CSS Designer panel, under Sources, click your style sheet file.
  4. Under @Media, click GLOBAL.
  5. In the CSS Designer panel, under Selectors, click the body rule.
  6. In the CSS Designer panel, under Properties, click the Background button Background button.
  7. In the background-color box, make sure to set a color here, preferably one with the same basic color as the background image you plan to insert. The background color here serves as a fallback option in case the graphic doesn't load.
  8. Under background-image, next to the url box, click the Browse button Browse button.
  9. Navigate to the images folder, click the background graphic, and then click OK.

To use a fullscreen background image (not covered in class)

  1. In the CSS Designer panel, under Sources, click your style sheet file.
  2. Under @Media, click GLOBAL.
  3. Next to Selectors, click the Add Selector button Add Selector button.
  4. Delete any text in the selector name box, type html, and then press Enter.
  5. In the CSS Designer panel, under Properties, click the Background button Background button.
  6. Under background-image, next to the url box, click the Browse button Browse button.
  7. Navigate to the images folder, click the image you want to use as a fullscreen background image, and then click OK.

    Note Be careful not to pick too large an image that it takes a long time to download. Also be careful not to pick too small an image that it doesn't fit within your layout. A reasonable starting point might be 1920 × 1080 for the image with medium JPEG compression.
  8. Next to background-position, set both values on the left and right sides to center.
  9. Next to background-size, set the value on the left to cover.
  10. Next to background-repeat, click the no-repeat button .
  11. Next to background-attachment, set the value to fixed.

To set your .container to use a white background

  1. Make sure your site is open in Dreamweaver.
  2. In the CSS Designer panel, under Sources, click your style sheet file.
  3. Under @Media, click GLOBAL.
  4. In the CSS Designer panel, under Selectors, click .container.
  5. In the CSS Designer panel, under Properties, click the Background button Background button.
  6. In the background-color box, type #fff to set the background to white. Doing so keeps the background behind the text white regardless of the other settings described below. You theoretically could use a different color from white, but remember that dark text on a light background provides the strongest color contrast.
  7. (Optional): If you want to include a border on both sides of the wrapper, click the Border button Border button, and then set a border that makes sense for your layout.

    Note Using a solid, 1px, #000 border for the left and right borders is a good starting point.