Answer

Modify Stylesheet Template Only

This method makes it possible to change all of the pages at the same time. It also assumes that you still have the default class and ID names in your templates.

• Upload image file.

• In the Stylesheet template, edit the banner section, specifying the location of your image, and the correct width and height:

  #banner { 
       background-image:url(http://example.com/image.gif); 
       background-repeat: repeat-y;
       width: 500px; height: 300px;
  }
  #banner h1 {display:none;}

• Save and rebuild the Stylesheet template. A full rebuild of the site isn't necessary.

It may be necessary to tweak the other background attributes in order for the image to appear as you want. See W3CSchool's CSS Background section for more reference.

Modify HTML Templates

This method will work in browsers which don't support CSS, plus it gives you control if you want a different image for each type of page.

• Upload image file.

• In each template you'd like the image to display, edit the banner section.

  Replace this:

  <div id="banner">
  <h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName$></a></h1>
  <span class="description"><$MTBlogDescription$></span>
  </div>

  with¹:

  <div id="banner">
  <h1><a href="<$MTBlogURL$>" accesskey="1">
  <img src="<$MTBlogURL$>image.gif" width="500" height="300"»
    border="0" alt="<$MTBlogName$>">
  </a></h1>
  <span class="description"><$MTBlogDescription$></span>
  </div>

• Save each template and rebuild the site.

¹ The » indicates line breaks added for display purposes; you should remove these breaks when using this code.