- Web design basics
- Working with thumbnails and wireframes
- Defining a Dreamweaver site
- Using the Welcome screen
- Previewing your completed file
- Modifying an existing CSS layout
- Adding a background image to the header
- Inserting new components
- Changing element alignment
- Modifying the page width and background color
From the book
From the book
From the book
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.
- Choose Window > CSS Styles to display the CSS Styles panel, if necessary.
- Select the image placeholder Insert_logo (180x90) in the header. Press Delete.
- Double-click the header rule to edit it.
- In the Background category of the “CSS Rule Definition for header” dialog box, click the Browse button next to the Background-image field.
- Select banner.jpg and note the dimensions of the image in the preview.
- Click OK/Choose.
- Choose no-repeat from the Background-repeat menu.
- Click Apply to view the results.
- 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.
- In the Background category, type #090 in the Background-color field. Click OK.
- Choose File > Save.
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.
)
The image is 950 by 130 pixels.
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.
)
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.
)
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.
You won’t see the background color unless the background image fails to load.