One of the issues with a fully liquid layout on a web page is the banner image is usually fixed in size and when you resize the window bigger there’s always going to be some space around the image that you need to deal with. This post looks at how to stretch an image using CSS creating a stretchy image header banner on a web page. Next week I’ll look at another solution which puts an extremely wide image into the background and only shows as much as the window is wide.
I’ve seen this method used on a couple of sites recently. Depending on the quality and content of the image it may work well and it also may not work all that well. I have a working example on another page which shows two different images. Click through to the example to try it out, resizing the window to see the effect in action.
The method is actually extremely simple. Just make sure your image is outside any containing elements which might have padding or margins, set the body to have no margin or padding and the image itself to have 100% width.
The CSS:
body {
margin: 0;
padding: 0;
}
.banner {
width: 100%;
}
The HTML:
<img class="banner" src="/images/rangitoto.jpg" alt="" />
Remember to check the example page to see it in action.
Issues with this solution
Obviously the image quality is going to suffer as the image gets resized wider than it actually is, and depending on the graphic format, image quality and the browser and operating system used it may look worse on some users’ computers than others.
The second issue is the height of the height of the image will increase as the window gets wider. This may not be an issue but it will push the content of your web page down considerably if the image is quite high in relation to the width.
Next week’s post
Next week’s HTML post (same time, same day next week) will show how to have a really wide background image so that it will continue to use the available space as the window gets wider, but isn’t subject to the scaling issues mentioned above.