Title: Floating Text Header Image
Last modified: August 19, 2016

---

# Floating Text Header Image

 *  [dobner](https://wordpress.org/support/users/dobner/)
 * (@dobner)
 * [16 years, 2 months ago](https://wordpress.org/support/topic/floating-text-header-image/)
 * Hey,
 * I want to swap out the standard header text for my site
 * [http://mountainash9.com/](http://mountainash9.com/)
 * and include a text image that I am producing in PhotoShop.
    I have been looking
   in the documents archive to find out what I need to do and still not clear. I
   want the image to:
    1.  Float on top of the existing greenish background
    2.  Left justified
    3.  Be clickable
 * Has anyone got instructions on how to do this? If not, can you give me steps 
   to follow to make this change. I’m not a WordPress jockey.
    Also in what format
   do I need to save the text image file in (tif, gif, jpeg) in order to get a transparent
   background?
 * Thank you
 * Frank

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [s_ha_dum](https://wordpress.org/support/users/apljdi/)
 * (@apljdi)
 * [16 years, 2 months ago](https://wordpress.org/support/topic/floating-text-header-image/#post-1397965)
 * 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](http://codex.wordpress.org/Template_Tags/bloginfo).
   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.
 *  Thread Starter [dobner](https://wordpress.org/support/users/dobner/)
 * (@dobner)
 * [16 years, 2 months ago](https://wordpress.org/support/topic/floating-text-header-image/#post-1398009)
 * Does the whole <div..>….</div> in the current header.php file get changed to 
   the <div..>…</div> with all of the appropriate changes that you suggested above?
 * I think I will need to put the blog in PRIVATE mode while I do this.
 *  [s_ha_dum](https://wordpress.org/support/users/apljdi/)
 * (@apljdi)
 * [16 years, 2 months ago](https://wordpress.org/support/topic/floating-text-header-image/#post-1398014)
 * 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');
       }
       ```
   
 *  Thread Starter [dobner](https://wordpress.org/support/users/dobner/)
 * (@dobner)
 * [16 years, 2 months ago](https://wordpress.org/support/topic/floating-text-header-image/#post-1398071)
 * Well apljdi
 * I was able to make the changes that you suggested and changed the header, but
   as you can see, I still have a white background that I need to deal with.
 * [http://www.mountainash9.com/](http://www.mountainash9.com/)
 * Thanks
 * Frank
 *  Thread Starter [dobner](https://wordpress.org/support/users/dobner/)
 * (@dobner)
 * [16 years, 2 months ago](https://wordpress.org/support/topic/floating-text-header-image/#post-1398073)
 * Hey
 * I made another change to it and happy with the placement. I think I went a little
   overboard on drop shadow, but that is for another day.
 * thanks for your help
 * Frank

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Floating Text Header Image’ is closed to new replies.

## Tags

 * [float](https://wordpress.org/support/topic-tag/float/)
 * [header](https://wordpress.org/support/topic-tag/header/)
 * [image](https://wordpress.org/support/topic-tag/image/)
 * [text](https://wordpress.org/support/topic-tag/text/)

 * 5 replies
 * 2 participants
 * Last reply from: [dobner](https://wordpress.org/support/users/dobner/)
 * Last activity: [16 years, 2 months ago](https://wordpress.org/support/topic/floating-text-header-image/#post-1398073)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics