• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
The Electric Toolbox Blog

The Electric Toolbox Blog

Linux, Apache, Nginx, MySQL, Javascript and PHP articles

  • Applications
  • FCKEditor
  • Apache
  • Windows
  • Contact Us
Home / Stretchy Image Header Banner with CSS

Stretchy Image Header Banner with CSS

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.

Check Out These Related posts:

  1. HTML/CSS background-position
  2. What Is a VPN?
  3. Wide background image header with CSS
  4. Using CSS sprites for image navigation

Filed Under: HTML And CSS

Primary Sidebar

Categories

  • Apache
  • Applications
  • Article
  • Case Studies
  • Email Servers
  • FCKEditor
  • HTML And CSS
  • Javascript
  • Linux/Unix/BSD
  • Microsoft SQL Server
  • Miscellaneous Postings
  • MySql
  • Networking
  • Nginx Web Server
  • Offsite Articles
  • OSX
  • PHP
  • Quick Tips
  • RFC – Request for Comments
  • SilverStripe
  • VMWare
  • VPN
  • Windows
  • WordPress

Recent Posts

  • Vim Show Line Numbers
  • Add User To Group Linux
  • Chmod 777 Tutorial
  • How to Copy Directory Linux
  • Linux create user

Copyright © 2021. ElectricToolBox. All Rights Reserved.

  • Contact Us
  • Copyright Info
  • Privacy Policy
  • Sitemap