In CSS, fluid dimensions should be always preferred when determining the overall width of page elements. In this post I'm going to show you how to create a fine styled CSS header that always fits the browser viewport.
First, you need a basic HTML structure like this:
<div id="branding">
<h1><span>Site Name</span></h1>
</div>
A semantical name for our element: that's what we need. Now let's apply CSS:
body {
margin: 0;
padding: 0;
background: #fff;
color: #222;
}
#branding {
height: 259px;
background: #333 url(fluid-header/branding.png) repeat-x;
color: #fff;
}
#branding h1 {
margin: 0 auto;
width: 90%;
background: url(fluid-header/header-bg.jpg) repeat-x;
height: 200px;
position: relative;
top: 59px;
border-radius: 10px 10px 0 0;
}
#branding h1 span {
display: block;
text-align: center;
padding: 10px 0 0 0;
font-size: 4em;
font-weight: normal;
}
The secret here is to use percentages and repeated background images. For example, the second background image is more than 900 pixels wide. Since we don't know in advance what kind of screen resolution we're going to support, it's better to choose images that can be repeated so that there won't be any blank or empty spaces.