Support » Themes and Templates » Header woes

  • I’m sure this pops up here all the time, but:

    I’m having trouble with getting my header image to work. I have an image I want to use, but it won’t show up. This wasn’t my blog to start, but I’m 100% positive that no changes were made to the template before I started trying to fix it up. But even when I started looking at it, there was no blue header at the top. Nothing. I’m not sure what happened. Can anyone help? Where do I put my header image link? How do I change the photo’s size? Thanks a lot.

Viewing 1 replies (of 1 total)
  • Normally, themes will use templates that create a header div and a headerimage div (usually located in header.php). The header image is a background image in the headerimage div, and this is set in your stylesheet (normally style.css) like so:

    #headerimage {
            background: #ffffff url(img/header.jpg) no-repeat left top;

    There will probably be other declarations in there such as margin and padding, as well as perhaps width and height, although the latter two often are left out if the image file’s dimensions are the same as those of the headerimage div.

    In my code above, the #ffffff refers to a background colour that is described by the hexadecimal number ffffff (which is white), and this means that if the header image i choose does not fill the headerimage div, then the empty parts of the div will be filled with white. You can change this hexadecimal code to signify other colours, or use recognised keywords such as red, black, gray, white, etc.

    The url part of the code points to the image file’s location. In my example, I’ve used a ‘relative’ url, which means that the image will be ‘looked for’ in the folder ‘img’ which is a child of my website’s url. i.e. it will look in

    no-repeat means that the image file will not be repeated horizontally nor vertically. This can be swapped for repeat-x or repeat-y or `repeat’ for both x and y.

    Left top indicated the position of the header image in the div headerimage. You may wish to use center top, to center it horizontally.

    To alter the image’s size, you can add this declaration to the css:

    #headerimage img {
    width: desiredwidthinpixelspx;
    height: desiredheightinpixelspx;

    Where either of desiredwidthinpixelspx, or desiredheightinpixelspx, can be replaced with auto, in which case the image would just retain it’s original dimensional proportions, and scale according to the width/height that you have set in pixels.

    The fact that you get no blue bar at the top could possibly mean that your header or headerimage div is not closed properly, but could also mean that there is just no style applied to those elements.

    If you could link your blog I could tell better.

    Hope this helps,

    – John

Viewing 1 replies (of 1 total)
  • The topic ‘Header woes’ is closed to new replies.