Introduction
A very handy CSS property is the "background-size" property. For background images, and images we need to cover an entire div we can simply apply "background-size: cover;" or "background-size: 100% 100%;". Doing so stretches the background image to the entire width and height of it's containing div. But that's not it. I wish that was the case, according to W3c the background-size property is only supported in the following browsers:IE9+, Firefox 4+, Opera, Chrome, and Safari 5+. Although our hate for IE as developers grows with every project we complete, it's an absolute necessity that the projects we complete are compatible with at least Internet Explorer 8. Take a look at the following data of Browser usage, taken from May 2013.
Internet Explorer 8 ALONE still holds a whopping 23% of the net market share, making it absolutely necessary to accommodate those users. A separate article can be written just on "why" this is, but for now we need to tackle this background-size problem. Thankfully, there is a very easy workaround for the background-size property in IE. The following properties can be added to your stylesheet and appropriate div in addition to the background-size property you have already applied.
[code] filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/logo.gif', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/logo.gif', sizingMethod='scale')"; [/code]
Easy Enough, What's The Big Deal
This works great, but there is a problem with it. Notice how this property requires you to set the background image itself. I ran into this issue recently when developing a site on the Expression Engine CMS, because it's a standard here at GRAYBOX to make every site element editable by the client. The issue is that if we set the background size and make it IE compatible, the client will not be able to use the CMS to later change this image and have it visible to IE users without having to make a change to the stylesheet. This property will simply not suffice when dealing with CMS applications.
What's The Solution?
Thanks to the glorious and ever-growing community of web developers there are now a number of solutions for this problem.
Solution 1
We can use an inline element, which will be able to resize in any browser. We set a min-height which keeps it filling the browser window vertically, and set a 100% width which keeps it filling horizontally. We also set a min-width of the width of the image so that the image never gets smaller than it actually is.
[code] img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } } [/code] Solution 2
Another simple way to handle this is to put an inline image on the page, fixed position it to the upper left, and give it a min-width and min-height of 100%, preserving it's aspect ratio. HTML:
[code]
[/code]
CSS:
[code] #bg { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; } #bg img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%; min-height: 50%; } [/code] Keep in mind that these examples are being used to set a background image the full width and height of a browser window.
I have used all of the above methods with no problems at all. See below for jQuery approaches.
Conclusion
Hopefully I've shed some light on a slight flaw of the very common IE background fix and directed potential distressed developers to some of the available methods. Don't take away from the true meaning of a Content Management System, and let your clients possess the ability to change images and reflect those changes across all users on the web.
Other Methods
The "Louis remi" Fix
BackStretch
AnyStretch
SuperSized