Last week I looked at how to do a stretchy image header banner with CSS so that as you resize the browser window the header image remains the full width of the window and the height changes. One of the issues with this method is the image can get quite tall and lose quality as the browser window gets wider. This post looks at how to instead have a really wide background image only showing what the browser window can fit. The rest disappears into the ether.
Demo
There’s a demo of this available here. You can check it out first if you would like and then come back to have a look at the code.
Photo used
The photo used in the example is 3072 pixels wide and 200 pixels high. The banner area remains 200 pixels wide as the browser window is resized but more of the image is revealed.
Here’s a scaled down (to 500 pixels wide) version of the image file:
The photo is of Rangitoto in Auckland and you can see North Head on the left side. The Eastern Suburbs are the small bit of land you can see at the bottom on the right.
The HTML
The HTML used to create the effect is completely minimal; it’s all done in the CSS.
<div id="header"></div>
The above should be at the top of the <body> section (unless you want something above it) and you might have further divs inside it that are positioned to where you want them with navigational elements etc.
The CSS
The CSS is also very simple. You simply set a few properties and away we go.
If you want to align it to the center, so that the image is centered and resizing the browser window will reveal more of the image on the left and right do this:
#header {
background: black url(/images/rangitoto-3072x200.jpg) center no-repeat;
}
If you prefer to align it to the left so it reveals off to the right as the browser window is resized then do this instead:
#header {
background: black url(/images/rangitoto-3072x200.jpg) left no-repeat;
}
In the unlikely event you would prefer to align the image to the right so the images revels to the left (which would be a kind of weird effect) then change "left" to "right".
Note that I’ve just set the background colour to black and made the image not repeat. This isn’t the most desirable solution – you’d probably want to set a max-width for the page and make the pixel width of the image the max-width. If you really want the page to stretch as wide as the entire page then you’d need to find some way of dealing with what happens when the window is super wide. Or simply not bother and allow people with such a wide view to see the image repeat.
Conclusion
This is a really simple technique and it’s an alternative to one I looked at last week but does require a wide, high quality image that works well as a narrow strip. If you haven’t already, check out the demo page.