Viewing 5 replies - 1 through 5 (of 5 total)
  • 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("https://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.

    Thread Starter ijesoul

    (@ijesoul)

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

    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("https://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.

    Thread Starter ijesoul

    (@ijesoul)

    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?

    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.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to add custom header image’ is closed to new replies.