Ever since I launched Basic2Col in March 2006, people have asked me how to replace the headertext with a banner, - and still make it link to home.

The latest version of the theme (3.0.x) let you do exactly that, and what you need to do is:

  1. Upload the image you want to use to /wp-content/themes/basic2col/gfx
  2. Open style.css and find /*header*/
  3. Replace all the #header codes with:

    #header {
    margin:0;
    padding:0;
    background: url('/2008/05/basic2col_using_an_image_for_header//gfx/yourheader.jpg') top left no-repeat;
    }
    #header a {
    z-index:1;
    display:block;
    height:150px; /*the height of your image*/
    margin:0;
    padding:0;
    text-decoration: none;
    }
    #header span {
    position:relative;
    overflow:hidden;
    z-index:-100;
    }
    #header p{
    display:none;
    }
    
  4. Save and upload to /wp-content/themes/basic2col
  5. That’s it!

Notes

If it look strange, make sure the height in #header a { is exactly the same as the height of your image.

If you’re not that happy with editing the source files for Basic2Col, you may consider to create a custom child theme for the theme.

This tutorial was previous published on my old site “WP Stuff” in March, 2008