Wednesday, January 12, 2011

IE 7/8 stretching background image to 100% width and height


CSS3 does present a superb & hassle-free way of developing web pages, but Microsoft’s IE 7 and 8 browsers don’t support CSS3 properties. It’s a big headache – ain’t it? Microsoft engineers have done a great job with IE8 at least 8 doesn’t act very weird as compared to 7. IE7 has tons of limitations when it comes to CSS based layouts, one of them is stretching background image to 100% width and height regardless of screen resolution.

Instead of calling it limitations I would say IE 7 prefers eating stuff little differently. So we need to go beyond enemy lines here :)

Stretching background image to 100% width and height is possible in IE 7/8 with CSS2 (CSS3 is way better than this. We only need to use ‘cover’ or ‘size’ property of it).

Here is the CSS: 



Use this conditional CSS for IE6: 



The HTML code: 




7 comments:

  1. I have been searching for a work around to stretch my background image for a while and this works!! The only difference that I have seen is that my load time for the page is slower and scrolling lags when viewing the index page. Do you know of a way that I can resolve this issue? I will post the url of my website.
    http://www.loosenutzorc.com

    ReplyDelete
    Replies
    1. Wow... this DOES work. Even with the liquid (floating) thumbnails I'm using over it. You've made my day! Now if I can just figure out how to create the text shadow thing...

      text-shadow:3px 3px 8px #000000;

      Gotta love inept browsers. Oh wait, there's only one. "IE"

      Delete
  2. Thanks, helps a bunch! Been looking all over and every example I've seen hasn't worked. The only difference is they didn't include the DOCTYPE part in their example. I guess I was just supposed to know that part...

    ReplyDelete
  3. No option for div containing little content ??????????

    ReplyDelete
    Replies
    1. You can use CSS3 background: cover; property but it won't work in old IE browsers, we will have to look for jquery fix it

      Delete
  4. Man it's the easiest way i could find works great
    Thans

    ReplyDelete