Lab: Background images--banners

A common design approach on the web is to place a large "banner" image which sets the tone at the top of a page, with the text content starting further down the page. Examples from the CSS Zen Garden follow. Note how that big image relates to the width of the text content below it....

You can display an image...

using the <img> tag, or
as a background image -- background of some box, that is.

The main advantage of putting an image in the background is that you can put other things (eventually links, or other content) on top of it.

We'll see that filling an image into the background of a box also makes it easy to align that image with the text content of the box.

Example

Our goal will be to make a modest layout box with a background banner image at the top, and the text starting below where the background image stops, like this:

Images from Santo Domingo

Here's where the text about and images from Santo Domingo would go....

The HTML markup for this is not very long. The red-bordered "box" corresponds to the <div>...</div> tagset.

<div id='mybanner'>
<h3>Images from Santo Domingo</h3>
<p>Here's where the text about and images 
from Santo Domingo would go....</p>
</div>

Here are the CSS style rules that make this happen:

#mybanner{
  background-image: url('someimage.jpg'); /* You can have Dreamweaver help you 'locate' your image */
  background-repeat:  no-repeat; 
  background-position: top left;
  
  width: 260px;
  margin: auto; /* This will center the box in Firefox (not IE) */
  padding: 20px; /* This will not add padding around the background image, only around the content */
  padding-top: 100px; /*  I'm overriding the 20px that was set in the previous rule */
  border: 1px red solid; /* Just so you can see where the <div id='mybanner'> is on the page */

}

Layout boxes (divisions)

Think of a division:

as a box,
a box we can attach style rules too,
a box that can contain other things (paragraphs, images, lists, headlines....)

Your "Santo Domingo" page probably already has a division in it like this

You can create new style rules for this particular division because it has a name (id="content") attached to it. Start up a new style in DW, and fill out the dialog box like this to make rules for an id:

edit ID

Some of the styles controlling the display of that box are coming from an external file (a 'stylesheet') at www.goshen.edu/lo/centered500px.css. With CSS rules, the last ones trump any earlier declarations, so make sure your local style rules are after the link to the stylesheet (DreamWeaver will hopefully do that automatically).

Your lab page

For this lab, start by making a copy of your "image placement lab" page.

Find a photo that you can use as a banner image. You may use a GC DR SST image (for example, look at this Summer 07 blog and find the original high-res photos here.) Or search photo-sharing site Flickr.com for some variation of 'Santo Domingo, Dominican Republic'. Flickr's advanced search let's you search exclusively for images that photographers have given permission to re-use.

Flickr search

Copy the largest size of image you can get.
Make a note of where you got your banner image and "cite" that "site" on your lab page.
Crop out a banner-worthy part of the image at least as wide as your layout box (500px wide, or perhaps a bit wider...),
Resize ('Image | Size') your image if necessary,
"Save to Web" in the same folder as your web page.

Now, you're ready to use the image as a background image as shown above for your 'content' division.

For this assignment, you'll want an image at least as wide as the widest width of your layout. You'll need to experiment with the padding-top to get a value that pushes the beginning of your text down to where you want it...

You may want to sample the photo you're using (eyedropper tool in Photoshop) to find a color to use as the basis for your color scheme for this lab.

Hand it in -- This time, so that you can see each other's work, hand your lab in by "Adding a comment" to this page. You can type HTML in to the comment, so make a link to your homework assignment.

My <a href="http://www.goshen.edu/~jillgc/bannerlab.html">Banner Lab page</a>