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:
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.
ReplyDeletehttp://www.loosenutzorc.com
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...
Deletetext-shadow:3px 3px 8px #000000;
Gotta love inept browsers. Oh wait, there's only one. "IE"
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...
ReplyDeleteNo option for div containing little content ??????????
ReplyDeleteYou can use CSS3 background: cover; property but it won't work in old IE browsers, we will have to look for jquery fix it
Deleteit work. COOL MAN !!!!!!
ReplyDeleteMan it's the easiest way i could find works great
ReplyDeleteThans