Support 'background-size' property on older browsers?

Question

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 w

Answer 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

or even an 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.

0 讨论(0)

查看其它6个回答

发布评论:

提交评论

---

•  加载中...