0

I'm using CSS transitions for the background-image property, though from what I can gather they are only supported by Chrome and Webkit (it doesn't seem to work in Safari 5.1.7). I really don't want to use jQuery for the transition since its only solution is to fade out the element (and with it the content) and fade back with a new background. Normally I would do it the standard way and have multiple divs or images inside a wrapper to rotate between, but the way this site is set up that simply wouldn't work (well technically it could, but it just seems ridiculously and needlessly over-complicated).

Visit the site here and you'll see what I mean: http://bos.rggwebdesigns.com/

Is there some way to safely fall back for other browsers that don't yet support background image transitions, either by disabling it completely or some other method? If the browser can't handle it, I don't want the user to just see the background change abruptly.

Bobe
  • 2,040
  • 8
  • 29
  • 49

1 Answers1

0

You can use Modernizr for feature detection, and then change your CSS on the fly accordingly.

Modernizr

Siddharth Gupta
  • 897
  • 5
  • 20
  • I am using Modernizr, but I don't have too much experience with it so I don't know what I'm looking for in terms of what I assume would be html tag classes. – Bobe Feb 19 '13 at 08:40
  • Modennizr actually helps you check if specific features are supported by a browser.. and if yes, you can continue as usual, and if not, you can change your HTML and/or CSS to the fallback. – Siddharth Gupta Feb 19 '13 at 08:43
  • So what would I look for in this case? – Bobe Feb 19 '13 at 08:48