Css – progid:DXImageTransform.Microsoft.AlphaImageLoader causing links to be unclickable in ie8, ie7, and ie6

backgroundcssfilterinternet explorer

Here's the CSS that applies the background so that it stretches with the browser window:

html {
    height: 100%;
    width: 100%;
}

body {
    background: url(images/skyline.jpg) no-repeat center 25% fixed;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/skyline.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/skyline.jpg', sizingMethod='scale')";
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: #ddd;
    height: 100%;
    margin: 0;
    width: 100%;
}

I have no problems when using FF, Chrome, Opera, or IE9, but in IE8 IE7 and IE6 (not that I should care about IE6) none of the links work.

When I disable the filter attribute the links work again. I read up that positioning the links relative might help but it didn't work and the outter element <body> isn't positioned relative anyway.

The site is http://sytko.com. The design and layout was requested to be this way by the client so it will be hard to pitch alternatives. Any help is greatly appreciated.

Best Answer

Per this explanation:

http://css-tricks.com/perfect-full-page-background-image/

"...anyone trying to use the above IE filters and having problems with scrollbars or dead links ... should try NOT using them on the html or body element. But instead a fixed position div with 100% width and height."

You could add a containing div just inside the body, then.

Related Topic