Header

I’m assuming you might want to change your header image. Who’d want that “Visionary” image on their site?

You’ll be working exclusively with your style.css file. There’s no need to edit anything else.

Well, here’s how we’d do it. Follow the list below to better understand customize your header:

1. The CSS code
2. The CSS code explained
3. Using a custom header image

The CSS code

Take a look in your style.css file. Find this bit of code:

/************************************************
	Header
************************************************/
#header-container {
	overflow: auto;
	background: #222;
	background: #fff;
	}
#header {
	padding: 0 0 0 15px;
	}
#header #site-title {
	float: left;
	display: inline;
	font-size: 2.6em;
	font-weight: normal;
	margin: 0;
	}
#header #site-title a {
	width: 328px;
	height: 61px;
	display: block;
	margin: 5px 0;
	background: url(images/header.gif) no-repeat 0 0;
	}
#header #site-title a span, #header #site-description {
	display: none;
	}

That’s what we’ll be working with.

Breaking down the code

#header-container contains everything that might be in your header. You probably won’t need to edit it to change your header image.

#header wraps around your site title and description.

#site-title is the ID of your site title.

#site-description is the ID of your site’s description/tagline.

Using your custom header image

Let’s suppose you want to change the header to a different image.

The best way is to just overwrite the original image — /images/header.gif — with an image of the same width (328px) and height (61px).

But, that’s not always the case. Let’s suppose we have an image that’s 400px in width and 100px in height.

All you need to do is change this code:

#header #site-title a {
	width: 328px;
	height: 61px;
	display: block;
	margin: 5px 0;
	background: url(images/header.gif) no-repeat 0 0;
	}

To this:

#header #site-title a {
	width: 400px;
	height: 100px;
	display: block;
	margin: 5px 0;
	background: url(images/header.gif) no-repeat 0 0;
	}

Pretty simple stuff, huh? If your image file name is different from header.gif, then you’ll have to change another line.

Let’s suppose it’s named custom-header.jpg.

We need to change this line:

background: url(images/header.gif) no-repeat 0 0;

To:

background: url(images/custom-header.jpg) no-repeat 0 0;

Of course, this file should go in your /images folder.