css transition background image fade - css

Question

I'm using css transitions to cause a fade-in and fade-out effect on a background-image property. The property gets changed via jquery when the user scrolls.
It initially did not work on any browser. I found that setting an completley empty/transparent PNG file on the original element made chrome work, but the other browsers still don't.
Here's an example of the code:
nav {
background:url(/img/empty.png);
background-origin:border-box;
background-position:top;
background-repeat:repeat;
background-size:50px 50px;
transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-webkit-transition: background 1s ease-in-out;
}
.contrast {
background:#3a3a3a url(/img/xnav.jpg);
background-origin:border-box;
background-position:top;
background-repeat:repeat;
background-size:50px 50px;
}
The contrast class gets applied to the nav element via jquery. It only seems to fade out on most browsers, but not fade in. It works properly in chrome.
Q1: Is there a cleaner way to do this? Adding a transparent PNG as a background element to the nav element seems like a hack.
Q2: This still doesn't work on firefox, IE or Safari. Can anyone suggest a clean fix?

Answer 1

You can "fake" the background-image opacity with pseudo-element on your:
nav{
position:relative;
}
nav::before{
content: "";
background: url(/img/xnav.jpg);
background-origin:border-box;
background-position:top;
background-repeat:repeat;
background-size:50px 50px;
opacity: 0;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
transition: opacity 1s ease-in-out;
}
.contrast{ // applied on nav::before
opacity: 1;
}
Thanks to Nicolas Gallagher for this.