Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe Dreamweaver

  • Print
  • + Share This
From the book Adding a background image to the header

Adding a background image to the header

CSS styles are the current standard for all web styling and layout. In the following exercises, you’ll apply background colors and a background image to a page section, adjust element alignment and the page width, and modify several text properties. All these changes are accomplished using Dreamweaver’s CSS Styles panel.

If you start at the top of the page and work down, the first step would be to insert the graphical banner that appears in the final design. You could insert the banner directly into the header, but adding it as a background image has the advantage of leaving that element open for other content. It will also allow the design to be more adaptable to other applications, like cell phones and mobile devices.

  1. Choose Window > CSS Styles to display the CSS Styles panel, if necessary.
  2. Select the image placeholder Insert_logo (180x90) in the header. Press Delete.
  3. When you delete the image placeholder, the empty header will collapse to a fraction of its former size because it has no CSS height specification.

  4. Double-click the header rule to edit it.
  5. In the Background category of the “CSS Rule Definition for headerdialog box, click the Browse button next to the Background-image field.
  6. Select banner.jpg and note the dimensions of the image in the preview.
  7. The image is 950 by 130 pixels.

  8. Click OK/Choose.
  9. Background images repeat both vertically and horizontally by default. This isn’t a problem at the moment, but to ensure that this setting doesn’t cause any undesirable effects in the future, you’ll need to change the repeat behavior.

  10. Choose no-repeat from the Background-repeat menu.
  11. Click Apply to view the results.
  12. The header is wide enough but not tall enough to display the entire background image. Since background images aren’t truly inserted into an element, they have no effect (positive or negative) on the size of a container. To ensure that the <div> is large enough to display the entire image, you need to add a height specification to the header rule.

  13. In the Box category, type 130 in the Height field and choose px from the pop-up menu to the right of the Height field. Click Apply.
  14. The background appears fully in the <header> element. Note that the image is slightly narrower than the container. We’ll adjust the width of the layout later. We don’t want to set the width on the <header> element itself. You learned in Lesson 3 that the width of block elements, like <header>, defaults to the entire width of their parent element. Before clicking OK, we need to add some finishing touches to the element.

    The <header> element contains a background color that doesn’t match your site color scheme. Let’s apply one that does.

  15. In the Background category, type #090 in the Background-color field. Click OK.
  16. You won’t see the background color unless the background image fails to load.

  17. Choose File > Save.
  • + Share This
  • 🔖 Save To Your Account