NOTE: The CSS for this tutorial has been updated in the April 7, 2010 post Update – Use CSS for Robust Headers in Thesis.
While I was crafting my header for this site, I noticed my fixed width header looked perfect in Safari, but truncated in IE 8 and Firefox.
“Alright” I mused, “Let’s see what happens if I repeat the image on the x-axis”. Luckily my background image could be easily repeated with a few minor tweaks and rendered correctly in IE 8 and Firefox.
I love simple designs, but thought the header was looking stark, so I hit the Thesis support forums for inspiration. I found some great examples and added a second image to my header leaving the site title in place. The result is displayed in header of this page. :)
An additional benefit of repeating the image on the x-axis was that no changes were necessary when I change my layout from two to three columns.
Here are the screenshots of the browser “issues” and the CSS code I used to create a robust header with two images. Please comment if you have any questions, I look forward to hearing how this works for other people.
Update: December 6, 2009
BEFORE you implement the CSS code below be sure you have the “Show site name in header” and “Show site tagline in header” options checked under Thesis Options > Display Options > Header.
CSS
/* custom header with rounded corners*/<br />
.custom #header{<br />
background-color: #cccccc;<br />
height: 150px;<br />
padding: 40px 0px 0px 0px;<br />
/*IE hack to fill in gap in box*/<br />
border-bottom: 1px #cccccc solid;<br />
/*rounded corners for Firefox and Safari Browsers*/<br />
-moz-border-radius-topright: 20px;<br />
-moz-border-radius-topleft: 20px;<br />
-webkit-border-top-right-radius: 20px;<br />
-webkit-border-top-left-radius: 20px;<br />
}<br />
/* header logo*/<br />
.custom #logo {<br />
display: block;<br />
padding: 0px 50px 0px 0px;<br />
text-indent:150px;<br />
position:absolute;<br />
height: 100px;<br />
background: url('images/logo2_web_wp.png')<br />
center left no-repeat;<br />
}
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p>/*header repeating image*/</p>
.custom #header #tagline {<br />
display: block;<br />
height: 100px;<br />
background: url('images/logo_web_wp.png')<br />
repeat-x;<br />
outline: none;<br />
background-color: #cccccc;<br />
}
Screenshots
Fixed Width Header Image in Safari.
Safari Fixed Width Background Image
Fixed Width Header Image Truncated in FireFox and IE 8:
Fixed width image Firefox
Fixed Width Logo IE
Repeating Header Image in FireFox and IE 8:
FireFox Repeating Banner Image
IE 8 Repeating Banner Image
