Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 806
diggersworld Avatar asked Dec 05 '22 00:12

diggersworld


1 Answers

I figured it out.

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

like image 81
diggersworld Avatar answered Dec 08 '22 14:12

diggersworld