Floating Text Header Image

You’ll need .gif or .png for transparency. .png will give you better resolution.

You’ll need to edit your theme to do this, so open your theme’s header.php file in a text editor and find this part:

<div id="headerimg">
   <h1>
      <a href="http://mountainash9.com/">Mountain Ash</a>
   </h1>

Its not likely to look exactly like that in the .php source but hopefully you can find it. There is good chance that “Mountain Ash”, for example, will be something like <?php bloginfo('name'); ?>. You need to convert that to an image. I’d do it something like this:

<div class="myheaderimage">
   <a href="http://mountainash9.com/">
      <img src="path/to/the/image" alt="" />
   </a>
</div>

You almost always need an absolute path for images in WP so look into the bloginfo function. Once you get the image to show up you’ll have to move to step two– the CSS to get it to show up the way you want.

I changed the <h1> to a div. That’s all. div class headerimg in your theme contains a whole lot of stuff. The class is misnamed if you ask me. You may also be able to add a background image to that div though. You could try adding in your style.css:

div.headerimg {
  background: url('path/to/image.jpg');
}