Stretched background with IE8

Side note : Microsoft has dropped support for IE8 last april 2014 :-(

There are still some clients that want their webapp to work perfectly on IE8. They can’t make all their clients move to the newest browsers. But some times, it can drive you nuts to achieve simple things. Our problem was about a background image in a div that doesn’t want to strech. Just some css will do it for all other browsers, but not for IE8. It needs a special “filter” like this :

.logondesktop { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( enabled=true, src='http://lorempixel.com/1200/800/', sizingMethod='scale');}

_ More info on this filter at Microsoft _

Here we add a nice background (thanks to Lorem Pixel ) to the ’logondesktop’ element. Ok, that made the trick. But, wait ?!? What happen to my links and form input inside the div ? There are no more clickable !!!

Damned IE8, another bug… Now, dig again to find a fix. Hopefully, it was easy. The div content must be relatively positioned. So the html looks like

<div class="logondesktop">
  <div class="logon">
    <a href="#">CLICK ME IF YOU DARE!</a>
  </div>
</div>
```sh
And the css to fix the IE8 bug :

```css
.logon { position: relative; }

See an example here (open with IE8) :  http://fiddle.jshell.net/hamdouni/w4BBE/show