CODEWITHSUNDEEP
htmlinternet-explorerbackground-imagecss
John Doe
John Doe

Reputation: 2060

Background Image won't stretch all the way in IE

I have an image that I am using as my background and am trying to have it fill the width of the screen 100%. I have applied background-size:100% and in MZF it works, but in IE it won't stretch anymore. Does anyone know a work around for this?

Here is the HTML...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        </head>
<body class="body">
            <!--Container to hold everything in the middle of page-->
            <div class="container">
</div>
</body>
</html>

Here's the CSS..

.body
{
    background-image: url(final2.gif);
    background-size: 100%;
    background-repeat:no-repeat;
    background-color:#C2C2C2;
}

.container {
    width: 1000px;
    height: 1930px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    background-color:blue;
}

Upvotes: 1

Views: 2324

Answers (3)

Dmitry Kononchuk
Dmitry Kononchuk

Reputation: 11

You might also try to use IE-specific alphaImageLoader. Just add 

.body {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='final2.gif', sizingMethod='scale');
}

to your stylesheet. Or, preferably, create a new IE7/IE8 specific css (included via conditional comments) and put this style in it.

Upvotes: 1

Spudley
Spudley

Reputation: 168685

You haven't specified what versions of IE you're testing against. This is important, because the various versions of IE have very different capabilities and quirks.

In this case, I am guessing that you're using IE8, because in IE8 and earlier the CSS background-size feature is not supported.

There are a number of solutions. Sadly none of them are great, but I'd suggest using a javascript polyfill solution that allows you to keep the existing CSS code for other browsers. The next best solution is to replace the background image with an <img> tag layered behind the existing element. A javascript polyfill will probably do this same technique, but transparently to you, so you can keep using the existing CSS.

Some scripts you could use:

Hope that helps.

Upvotes: 0

Oriol
Oriol

Reputation: 288130

See http://jsfiddle.net/j5q63/

You can emulate a background using an image just after <body>:

<img id="bg" src="path/to/your/image.png" />

And then

#bg{
    position:absolute;
    top:0;left:0;
    width:100%;
    z-index:-1;
}

Upvotes: 1

Related Questions