Posted 4 months 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!
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.
Posted 4 months ago #
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("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.
Posted 4 months 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?
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.
You must log in to post.
