Comments on: How To Put An Image As Your Header

By: Rachel

Rachel — Sun, 16 May 2010 14:32:10 +0000

Thanks for this, it really helped me!!

By: Dean

Dean — Wed, 28 Apr 2010 04:22:01 +0000

Hey Matt, thanks for your blog, I’m having trouble loading an image as a header…I’ve done the 3 steps you’ve advised in your blog: (and I uploaded my image into my images folder via file manager in host gator)

# Open custom.css in an editor AND open the folder labeled images, which is found in the same folder as custom.css and custom_functions.php.
# ****VERY IMPORTANT**** You must now load the header graphic on your server in the images folder.
# Enter the following in the custom.css file:

Except I’m not sure where the “images” folder is, because it’s not in the same folder as custom.css and custom functions.php that I can see?

By the way, here is my version below of step 3: (my image is named “header” and it’s a .jpg file)

.custom #header { background: url(‘images/header.jpg’) no-repeat; text-indent: -9999px; border-bottom: none; }

I’ll wait to hear back, thanks again. And following you on twitter just one state below you in Tennessee…

Dean

By: David

David — Wed, 21 Apr 2010 15:24:03 +0000

Matt,

First of all, great site -very informative. I have a question concerning the this header tutorial; how do I link the image or the header area to my home page??

By: Kevin

Kevin — Wed, 14 Apr 2010 03:21:49 +0000

I’m wondering if you know how to put a custom header image in, but also have the nav menu in the top right of the header.
I’ve used your code for my custom headers on all my sites…
and the following for the one site I DONT have a custom header, but the nav in the top right…
/* Top Nav bar */
.custom ul#topnav {
border-style: none;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
background:#dddddd none repeat scroll 0 0;
width: 100%;
float: left;
}
.custom ul#topnav li { float: right; padding: 0px 10px 0px 0px; }
.custom ul#topnav li a { font-size: 1.5em; color: #0000ff; font-weight: bold}
.custom ul#topnav li a:hover { text-decoration: underline; }

any idea how I can have both?

By: Silver

Silver — Tue, 02 Mar 2010 12:10:01 +0000

Hey Matt it’s me again.

I’ve been looking for this for a long time, but no tutorials seem to work for me, my header image just doesn’t show up.

There was this one tut. in yutuub, but it used sandbox page, and placed “header image” above header area. Atleast it worked.

But maybe you can tell why it ain’t showing up?

By: Tony

Tony — Mon, 14 Sep 2009 15:04:04 +0000

Hello, I have a custom header image, however, I’d like to add a Google Voice Widget as well (into the header). Do you think this is possible?

By: Matt

Matt — Fri, 26 Jun 2009 03:22:12 +0000

I would have to see what you are talking about. Send your url to thesistutor[at]gmail[dot]com. I would be more than happy to help!

By: Karim

Karim — Thu, 25 Jun 2009 22:59:56 +0000

Question for you!
When adding a logo banner at the top of the page, there is a space between the logo and the top of the page. I guess this is because, in full-width framework, the logo goes in the ‘header’ id and not in the ‘header-area’. Is there a way to have the logo image to be directly at the top of the page (i.e., no space between the image and the top of the page)?

Thanks for this great site!