How do I change header text to an image?

Hey guys,

I’m trying to change the text from a header file to an image instead. Right now, the theme that Ive got loaded in wordpress uses text as the header “logo”. I want to use a simple image file instead.

the website is

As you see there, the main logo is the text “Apex Trades | the Apex of Penny Stocks”

Instead of this text, I’d like to use an image file.

The code is this:

<div class="clear"></div>
<div id="header">
<div class="blognames">		
<h1 id="blog-title"><span><a href="<?php bloginfo('home') ?>/" title="<?php echo wp_specialchars( get_bloginfo('name'), 1 ) ?>" rel="home"><?php bloginfo('name') ?></a></span></h1>
<h2 id="blog-desc"><span><?php bloginfo('description'); ?></span></h2>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
<div class="clear"></div>

Can someone please point me in the right direction? I tried cutting the code and pasting the image link, but then the site gets all crazy/doesnt load on me so I’m missing something…

A good way to do this is via “image replacement”. Here are two handy tutorials. Do these make sense?


that would work, but I’d really rather get rid of both the search box and the header text and just replace them with an image. Surely there is an easier way to do such a simple thing…:confused:

I’m even fine with the header image being the same size as h1 in my ss


anyone? please have a look, I know there is a simple solution but I’m missing something important, I just don’t know what

Probably the ideal would be to pull out the search box etc, but an easy and quick solution would be to hide what’s there now with this:

.blognames, #search {
    display: none;

Then create an image 1000px x 110px, upload it to your images folder, and add this to the CSS:

#header {
    background: url(/images/header.gif);

However, best practice is to keep the H1 visible in the html and to place the image over the top of it (as in the first link I gave above) so that search engines can still see the H1 and people will see text if images are disabled.

The path to you logo image isn’t correct. Where is it located in relation to your root? At the moment, you are telling your style sheet to look for the logo here:

But that folder doesn’t exist. We need to know where the images folder is.

Also, you haven’t set the search bar to display: none yet, so it will still appear.

Ralph, thank you for your help and your patience - I did what you said try to do, and now I end up with no header text or image, could you have a look please? what am I doing wrong?

thanks Ralph, I got it working :slight_smile: much appreciated :cool: