CODEWITHSUNDEEP
internet-explorerfilterbackgroundcss
diggersworld
diggersworld

Reputation: 13080

CSS3 Internet Explorer Scale Background filter:

I'm trying to stretch a background image so it always fills the window.

Using CSS3 I have managed it in mozilla and chrome, however am struggling in IE. I have managed this before in IE but this time its not working, here's my HTML and CSS:

HTML5:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <title>IndieCity.com Signup</title>
        <!-- CSS gets included here -->
    </head>
    <body>
         <div id="background"></div>
    </body>
</html>

CSS:

div#background {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    min-width: 1024px;
    min-height: 768px;
    display: block;
    background: url(../img/theme1.jpg) no-repeat;
    background-size: 100%;
    -moz-background-size: 100%;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/theme1.jpg', sizingMethod='scale');
}

I'm using IE8.

Upvotes: 4

Views: 5868

Answers (1)

diggersworld
diggersworld

Reputation: 13080

I figured it out.

The path for the image when using filter is relative to the HTML page and not the CSS file.

Upvotes: 16

Related Questions