This didn't work for me. It made the text in the header white, but didn't insert the image.

I prefer to use this, where the ID is the unique page Id.I find it easier. You can find the page id with firebug.

#id_1d0c0a3b-4a99-426c-878b-8bd5f96756c3
{  background: url(/download/gallery/img/announcementspng) no-repeat;    display: block;        height: 0 !important; /* Do NOT change the height - use padding-top as your height */              overflow: hidden;              padding-top: 146px; /* This is the height of your image */             width:940px;

}

OK - Tried that, and it worked...but...the frame around the header and the small icon you have in there by default is still there, which I would want to get rid of. If you look at the Resources page in our community, that's the one I worked on.

Thanks Bryan, one small note, the method you have is an image/text replacement which hides the text so it can be used for this but is not the best option. You can get a better idea of how image replacement works in the following document.

Adding an image to your title

Catherine something I noticed in your community CSS: there was a space between the url and the first parenthesis "url (". A small typo that appears correct but does affect your code.

#content {
    background: transparent;
}
Also there is a style block that is also affecting the display of the banners.

#content-head,
#myprofile #content-head {
    margin: 0 0 8px 0;
    padding: 20px;
    background: #fff;
    -moz-border-radius: 0 0 4px 4px;
    -webkit-border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-box-shadow: 0 0 1px #000;
    -webkit-box-shadow: 0 0 1px #000;
}

#content-head h1 {
    margin: 0 35px 0 0;
}

If you remove this block you will be closer to the final style you are looking for.

Almost there! The only thing I can't seem to get rid of is the icon that appears in the Resource Center header.... How do I prevent that from appearing?

Try this to hide the "Space Title Icon"

/* SPACES
=============================================== */
.ig-gsicon { display: none; }
.ig-gshome {
  background-image: none !important;
  text-indent: 0 !important;
  width: auto !important;
}

Boom! Thanks Gary. That did the trick. 

One problem - in group spaces (Resource Center on our site), it's putting the breadcrumbs in the header, but it's extending to two lines because of the font size I'm using there. Can I set it so the breadcrumbs stay on the same line or eliminate the breadcrumbs? Tx.

This is the trouble:

#content-head *,
#content-head a,
#content-head h1 {font-size: xx-large; font-family: Helvetica; color: #fff; }

The best approach would be to target the breadcrumbs and h1 separatley:

#content-head a,
#content-head h1 {font-size: xx-large; font-family: Helvetica; color: #fff; }

#content-head #breadcrumb,
#content-head #breadcrumb a { font-size: 12px; }

or to hide the breadcrumbs globally:

#breadcrumbs { display: none; }

Thanks - I hid the breadcrumbs and that did the trick.