Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Detect support for background-size: cover

What is a save way to detect support for CSS3 background-size: cover, especially in IE < 9?

Following test returns a false positive in IE < 9, because it actually sets background-size to cover:

div.style.backgroundSize = 'cover';

The only true result I get when testing for:

if ('backgroundSize' in div.style)

But according to the site http://www.standardista.com/css3/css3-background-properties/#bg11, IE 6/7/8 should return auto, only cover and contain are not supported.

Edit:

I would like to use my own solution, but I have checked the code used by Modernizr. It seems they use the same technique that gives me false positive results in IE < 9: Set backgroundSize = 'cover' and then check for style.backgroundSize == 'cover'.

See my JSFiddle.

like image 292
John B. Avatar asked Sep 03 '12 08:09

John B.


1 Answers

If you use Modernizr you can download only the code necessary to perform this kind of task

http://modernizr.com/download/#-backgroundsize-testprop-testallprops-domprefixes

then you can test with

if (Modernizr.backgroundsize) {
    /* backgroundSize supported */
}
like image 115
Fabrizio Calderan Avatar answered Sep 28 '22 02:09

Fabrizio Calderan