News

Get creative with fixed web headers in CSS

Discover the techniques needed to create a fixed background header, inspired by Google Ventures

headers

The first part of any website that your visitors are going to look at is the header, but so many headers are either over-designed or your eyes pass over them in less than a second. Google Ventures, in contrast, knows how to get a user’s attention with its large header that encompasses both a hero section and menu. The unique part about this site is that when the user scrolls up the page the main content moves over the top of the fixed header section. The stunning use of imagery gives a great backdrop to the theme. Being venture capital, the image shows people who have overcome the rugged terrain which makes for a fitting metaphor. This in turn becomes a nice clean backdrop for the typography to sit on.

TECHNIQUE

Page structure
Add the code below into the body tag. This gives us a div tag at the top of the page that contains the fixed image. Inside this we add the text in the HTML5 header tag. The article tag that follows is the main body of the website to put all of your page content.

001 <div id=”top”>
 002 <header><h1>A radically different     kind of header</h1>
 003 <p>Here is the next section of text description.</p>
 004 </header>
 005 </div>
 006 <article><p>This is where the next     section would go</p></article>

Style time
In the head section, add the style tags with the paragraph and body margins set to 0px. This stops the header starting with a gap. The remaining code will all be placed inside the closing style tag. Once you’ve added the code place your cursor before that tag.

001 <style>
 002 p{margin:0;padding:0}
 003 body {margin: 0px;}
 004 </style>

Add the image
So now add the following code into the style tag. This makes the text colour white, while making the div tag fill the full width of the browser and the full 500px height of the div tag. The image is added and we make this section fixed so that it won’t scroll with the page.

001 #top {
 002 color: #FFF;
 003 height: 500px;
 004 width: 100%;
 005 position: fixed;
 006 background-image: url(img/header.    jpg);º
 007 background-position: center;
 008 }

Header text style
The next block of code tells the header to sit 300px from the top of the screen. It’s centred with a width of 960px and the text is also centred in this block. It’s important when using HTML5 tags to set them as a block element if you want them to display like a div tag.

001 header {
 002 display: block;
 003 height: 200px;
 004 width: 960px;
 005 text-align: center;
 006 padding-top: 300px;
 007 margin-right: auto;
 008 margin-left: auto;
 009 }

The rest of the page
The remaining page is the article tag, so we make the background colour of this white. Again we centre the text and make it longer than the page. Save this and open it in the browser to see the full-width header with the content that scrolls over this fixed section.

001 article {
 002 background-color: #fff;
 003 display: block;
 004 height: 1200px;
 005 width: 100%;
 006 text-align: center;
 007 padding-top: 100px;
 008 z-index: 5;
 009 position: absolute;
 010 top: 500px;
 011 }

STYLING THE HEADER IMAGE

Preparing the image for the header is an important part of the process; the blurs that are added at the edges help compress the image. Here we reveal exactly how to get the same style using Photoshop.

Source an image
To get the Google Ventures look, we need an image of a beautiful landscape; compfight.com is a great Flickr search tool for finding Creative Commons photos. Open this in Photoshop once you’ve found one.

Resize the image
Using the Crop tool, crop the image to the full width but only 500px high. Press Q to switch to the Quick Mask mode. Grab the Gradient tool and drag from about a third in from the left over to the far left.

Blur the background
Press Q to leave Quick Mask mode and add a 9px Gaussian Blur. This cuts down on the final pixel data so you can compress the image better. Repeat the Quick Mask and Blur process with the other side.

×