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.
I figured it out.
The path for the image when using filter is relative to the HTML page and not the CSS file.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With