Support 'background-size' property on olde

问题:

Is there a way that I can use the CSS3 'Background-Size' property and then use something like Modernizr to ensure that it's supported in older browsers (in particular I want to use 'background-size: cover' option)?

I took a look at cssFx, which is mentioned from the Modernizr website, but this only seems to add vendor prefixes for browsers which need them to use a property, rather than allowing browsers such as IE8 to support the background size property.

Also looked at CSS3Pie, but that doesn't seem to currently support the background-size property.

[11/10/2011 - By older browsers I'm thinking mainly of IE7/8, but ideally I would like to cover FF3.6, etc.]

回答1:

You're right that background-size is not supported on a number of older browsers.

The typical solution to this is to simulate it using an additional <div> or even an <img> element positioned behind the element you want to have the background.

This can be achieved simply by using additional markup, but this solution has the disadvantage of meaning that you'll be using it for all browsers, instead of the background-size property. In other words, it means deliberately degrading your code for the sake of old browsers, which is not ideal.

If you want to use the CSS property for browsers that support it, you could use a bit of Javascript to generate the above markup, but only if required. This means that modern browsers can happily use background-size, and only older browsers will use the fallback.

There are a number of Javascript solutions to this available on the web (a quick google turned up the following: http://css-tricks.com/766-how-to-resizeable-background-image/ among others), but more importantly you need to know how to trigger it based on the browser.

This is where Modernizr comes in. The description you've given of Modernizr in the question is not entirely accurate. What it does is produce a set of CSS classes in your HTML markup and matching variables in your Javascript that represent all the browser features. These are boolean flags indicating whether the current browser supports.

So with Modernizr you can then check in Javascript whether the browser supports background-size or not, and only run the alternative javascript function if it doesn't support it.

if(!Modernizr.backgroundsize) {
    //do stuff here to simulate the background-size property for older browsers.
}

Hope that helps.

回答2:

You can see support for background-size and its properties at: http://www.standardista.com/css3/css3-background-properties

This CSS supports IE9+, FireFox 3.6+, Safari, Chrome:

background-size: cover;
-moz-background-size: cover;

For IE7/8 support, caniuse.com lists this polyfill: https://github.com/louisremi/background-size-polyfill

回答3:

First of all there is an easy fix for Firefox 3.6. There is a vendor prefix:

-moz-background-size

With regard a solution when using media queries: You could use Modernizr to target another image for when users are viewing older browsers, this would mean another browser request. However, presumably you will be loading smaller images for each query where the screen size gets smaller. Because Modernizr will create a situation where these requests will be ignored in newer browsers you will cut down on server requests for the majority of people using newer browsers.

Out of curiosity, I tried the above solution and it worked. I applied the following modernizr classes as: .no-backgroundsize for non background-size supporting ie and loaded in a new image. For all other browsers I added the class .backgroundsize and included the prefix mention at the top for FF. This could be repeated for each media query with a new image for .no-background. This is one way to solve the problem.

-I edited this post after I tried it 12/15/12.

回答4:

I think you probably want to use modernizr to check whether or not the property is supported in the current browser. If not, try to figure out an alternative display of your site/application that still looks good without the need of the background-size property.

Of course, you can also try another approach that does not involve this property at all like an underlying div with a picture in it (which you can size) and the content that is overlapping this div. Good luck.

回答5:

Another option would be Background Size Polyfill:

.selector { 
    background-size: cover;
    /* The url is relative to the document, not to the css file! */
    /* Prefer absolute urls to avoid confusion. */
    -ms-behavior: url(/backgroundsize.min.htc);
}

回答6:

Best sample to support better:

  background-image: url(bg-image.png);

      -webkit-background-size: 100% 100%;           /* Safari 3.0 - Old Chrome - Old Android */
         -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
           -o-background-size: 100% 100%;           /* Opera 9.5 */
              background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */

Don't add this, because it made problem in new firefox versions:

-moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5)

Source: mozilla.org