Screenshot of Page without a gradient fill background
This is an update to my original tutorial Use CSS for Robust Headers in Thesis originally published in July 2009.
In that tutorial, I made the case for using a repeating background image to “flex” with changes in page width. This will also help avoid strange header image “overhangs” when a reader increases font size in a Safari browser using Thesis and WordPress.
Using this original custom header CSS code on my blog caused a distinct grey band to appear over my repeating mountain image (see image above). This was much more apparent on laptop and lower resolution screens than my usual monitor, so it was time to address this issue.
“Old” CSS
/* custom header with rounded corners*/
.custom #header{
background-color: #c1c1c1;
height: 150px;
padding: 40px 0px 0px 0px;
/*IE hack to fill in gap in box*/
border-bottom: 1px #cccccc solid;
/*rounded corners for Firefox and Safari Browsers*/
-moz-border-radius-topright: 20px;
-moz-border-radius-topleft: 20px;
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
}
/* header logo*/
.custom #logo {
display: block;
padding: 0px 50px 0px 0px;
text-indent:150px;
position:absolute;
height: 100px;
background: url('images/logo2_web_wp.png')
center left no-repeat;
}
/*header repeating image*/
.custom #header #tagline {
display: block;
height: 100px;
background: url('images/logo_web_wp.png')
repeat-x;
outline: none;
background-color: #cccccc;
} |
