WordPress.org

Ready to get started?Download WordPress

Forums

How to add custom header image (6 posts)

  1. ijesoul
    Member
    Posted 2 years ago #

    Hello,
    I want to add a custom header image to my website but I'm not sure where in the code to insert it.

    my website is: http://www.soulpoweredcoaching.com

    and the code in the header.php looks like this:

    [code moderatd - please use the pastebin]

    Can someone tell me where to insert the link to the custom header image I have?

    Thank you!

  2. vtxyzzy
    Member
    Posted 2 years ago #

    You can place an image as the header background (replace the purple section of the header) by adding a rule like this to the end of style.css:

    body.header-fixed div#header {
      background-image: url("http://mysite.com/path-to-my-header/myheader.jpg");
    }

    Your header image will need to be sized properly to get a correct display. I think the size would be 950 x 100 px.

    You may also need to adjust the positions for the site title and description.

  3. ijesoul
    Member
    Posted 2 years ago #

    thanks. i did what you said and for some reason it still didn't work. any ideas why?

  4. vtxyzzy
    Member
    Posted 2 years ago #

    The URL somehow got messed up when you inserted it. Please edit your style.css and make the URL look like the above without doing a copy/paste.

    Also, the size of the image is 950 x 170. That will not look right unless you increase the height of the header area.

    You also need to hide the text site title and description.

    You do all of that by adding this to the end of style.css:

    body.header-fixed div#header {
    background-image: url("http://www.soulpoweredcoaching.com/wp-content/uploads/2012/01/header.png");
    }
    body.custom div#header {
        height: 155px;
    }
    body.custom div.header-link-text {
       display: none;
    }
    h1#tagline {
       display: none;
    }

    Note that I have included the header image in this code. You do not need it twice, I just put it here for completeness.

  5. ijesoul
    Member
    Posted 2 years ago #

    thanks. i'll try that.

    how did you know that the URL got messed up or my image height? do you have access to my stylesheet?

  6. vtxyzzy
    Member
    Posted 2 years ago #

    I don't have access to your site, but I can examine the stylesheet that was sent to the browser by using a debugging tool.

Topic Closed

This topic has been closed to new replies.

About this Topic