Talented developer who likes to create unique digital content

IE Problems with CSS3 'background-size: cover' and IEFilters

Tue, 02/22/2011 - 00:14 -- admin

I recently finished the website for Irish Instrumental band Refraction, who are good friends of mine so check them out. This site was designed to use a fixed image background, seen below, which the content would scroll over.

To make this possible I chose to use the CSS3 method 'background-size: cover' as described in detail over at A List Apart's article "Supersize that Background, Please!" This is an interesting method as it comprises simple CSS statements alongside media queries which enables preservation of the background image's aspect ratio.

This method however does not work in Internet Explorer versions below 9 as neither 'background-size: cover' nor media queries are supported. I then found a work around to this method over at the Adobe Developer Connection forums. It was a post called "Scale Background image to browser size" and it involved the use of IEFilters, shown in bold in the code below. 

html { background: url(/wp-content/uploads/2011/01/background-photo.jpg) center center fixed no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-color: #000; overflow: auto; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/wp-content/uploads/2011/01/background-photo.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/wp-content/uploads/2011/01/background-photo.jpg', sizingMethod='scale')"; }


html {
background: url(/wp-content/uploads/2011/01/background-photo.jpg) center center fixed no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #000;
overflow: auto;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/wp-content/uploads/2011/01/background-photo.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/wp-content/uploads/2011/01/background-photo.jpg', sizingMethod='scale')";

}
This seemed to solve the issue but I then found that the scrollbar was not active, it did not respond to mouse clicks, only responding or scrolling when the scroll wheel on the mouse was used. The links and text were also inactive along with everything else on the page, hover effects were also not firing.

Paula Ziecina then explained the reason for these IE issues and pointed me towards a possible solution. Paula stated that the reason for this is that IE's Cleartype needs to be re-enabled after applying this type of CSS filter hack and to do this you explicitly specify a position method, e.g. - by adding 'position: relative;' to the above html selector.

Unfortunately none of these changes or work arounds have worked for me so far, but I think Paula has pointed me closer to the finish line. I am still interested in finding out a solution to this so if anybody has further information, please comment...Thank you.

Comments

Submitted by admin on

Cheers Espen, I'd actually seen that article initially but had gotten so far with the method outlined using filters that I thought there must be a solution. It's not the worst work around on IE at the moment for the site I detailed above, the image just isn't stretched fully and there are two black columns either side of the background. Roll on IE9!!

I ended up using a img with 100% (technique #2 in the article). Would rather use a filter but without a workaround for clickable links then it is a no-go.

Submitted by admin on

Yes, I agree, however I'm still using the CSS3 technique but without the filters. Due to the nature of the site this is one, I don't expect a huge number of IE users (< 10%). In IE the site has 100% functionality and a slightly degraded aesthetic. I'll update the post if I come across a solution the the filter issue...

Submitted by Anonymous (not verified) on

To solve the problem of inactive links I discovered that using one div to the background and one for the content might be really helpful. This is a short snippet to illustrate the above 'concept':

<div class="wrapper"
     
           

     
     
             
                   

             
       

where:
.f { position:relative; width:100%; height:100%; overflow:hidden; }
.wrapper { position:relative; float:left; width:200%; height:100%; }
#bg { position:relative; float:left; width:50%; height:100%;  background:..; filter:...;-ms-filter:..;}
.content-wrap { position:relative; float:right; width:50%; height:100%; }
.content { position:relative; right:100%; width:100%; height:100%; }

for seo purposes we could even push content above background div and add proper z-index value.

I hope this will be helpful

greetings:)

Submitted by admin on

Thanks for this Adrian! Haven't had a chance to test it yet, but will get back to you shortly. Cheers.

Submitted by Anonymous (not verified) on

You can't apply it to the HTML tag.  Use an inner "wrapper" element instead.

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.