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: