Resizing Image according to window size for IE

Question

According the given script

<style>
.x{
    background: url('img.jpg') no-repeat;
    background-size: contain;
    height: 100%;
  }
</style>

<div class="x"></div>

It's work fine for chrome and firefox ... any idea how to make it work with IE 7, 8, 9

i tried many scripts and nothing work well like FF and chrome.

http://stackoverflow.com/questions/2991623/make-background-size-work-in-ie — ndm, Oct 15 '12 at 14:08
@ndm i tried that before ... but with no success. could u post it as the same example at http://jsfiddle.net/ — , Oct 15 '12 at 14:14
see this,it may help http://stackoverflow.com/questions/2991623/make-background-size-work-in-ie — Toretto, Oct 15 '12 at 14:47

Jason M. Batchelor · Answer 1 · 2012-10-17T15:28:08.730

IE before 9 does not support background-size:

http://www.css3.info/preview/background-size/

You'll have to come up with a different technique to handle that case. See this for an explanation of workarounds: http://kimili.com/journal/the-flexible-scalable-background-image-redux

If you want an example (I won't claim it's a great example, but technically speaking, it works), you can look at the code for this site that I worked on last year. The client wanted a background image that scaled to the size of the screen, but also changed when the slides rotated, so it gets a little scary, code-wise:

http://www.buzzhoney.com/

You're going to want to pay attention to the various settings in http://www.buzzhoney.com/Content/style.css

This site was also supposed to be responsive, so there are several levels of @media queries to look at, there. There is a lot in there, and I don't have time to repeat it all, but here are highlights:

Based on this shell of markup (I've removed all the extra stuff that would just get in the way of how these primary elements work together):

<html>
    <head>
    </head>
    <body>
        <div id="container">
            <div id="header">
                <!-- snip header stuff -->
            </div>

            <div id="main" role="main">
                <!-- snip body stuff -->
            </div>
            <footer id="footer">
                <!-- snip footer stuff -->
            </footer>

            <div id="background">
                <div id="background-photo"><img id="bg_0" src="/Content/themes/base/images/index/bg-home-1200x933.jpg" class="opaque"></div>
            </div>

            <!-- snip js includes, per best practices, 
                 located at the bottom of the page -->
        </div>
    </body>
</html>

Starting around line 316, we set up initial styles for the background container and its image, but only for devices between 320px and 480px wide, for smartphones. At 416, however, we start to set up styles that will apply from devices 321px wide and up:

#background
{
    left: 0;
    min-height: 730px;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
    height:100%;
}

#background img 
{
    left: 0;
    min-width: 1200px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -2;
    display:block;
    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}

Note how the container (#background) is set to 100% width and height, with a min-height of 730px, and the image inside is set to 100% width, but is given no specific height, just a min-width of 1200px. This basically says that it will scale up, and height will change in proportion to its width, but the width will never go below 1200px, so at that point, the container will collapse around the image and hide the excess that doesn't fit within its area (overflow:hidden).

Note also, that I'm using position:fixed, and a left:0, top:0, to anchor the background container in place, and using a z-index:-1 to place it behind everything else.

There are minor modifications to add some other features at higher resolutions, but nothing alters this basic setup. For your purposes, unless you want the fading/changing backgrounds, you would remove the lines:

    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);

as they'll make the background image invisible.

If you can't take the time to read through the article, there's little I could post, here, that would make it easier for you. The answer to your issue is also highly dependent on the markup of your page, and how you have your other elements arranged, as I assume that there is more to your site than just a background image. Google 'full screen background image' for pages of ideas on how to accomplish what you're looking to do. — Jason M. Batchelor, Oct 15 '12 at 14:20
i already read those articles. because i spent long time searching and reading in this issue and most of recommended solution not match the case i want. so i simplify the issue to the above example and need a solution for it. the same behavior of chrome and firefox i want it in ie if it applicable. — , Oct 15 '12 at 14:25
The idea of posting the solution as example may be i do it with the wrong way... So, if u know the right way — , Oct 15 '12 at 14:29
I've now included both a link to a site that uses this technique, and snippets of code along with explanations of what is going on in there. — Jason M. Batchelor, Oct 17 '12 at 15:29

Resizing Image according to window size for IE

1 Answers1