Trouble adding css transformation to background images - html

Question

I'm creating a simple web page and I'm having trouble adding a fade animation to the css when the background image is changed. I know I need to use something along these lines but whenever I try it, it doesn't seem to work...
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;
I'll put a link to my css and html below, if anyone could take a look, I would be very grateful :)
CSS: http://pastebin.com/9k1tSiAE
HTML: http://pastebin.com/2K7GFWjN

Answer 1

The problem is you are changing the background image in addition to simply changing properties on the background itself. I've setup a fiddle with some random background tiles. You'll see the background slides but the image changes immediately without a transition:
http://jsfiddle.net/jimjeffers/a2jAF/
You'll need to settle on one image for the background but right now you have three:
background-image:url(nav-bg-initial.png);
background-image:url(nav-bg-secondry.png);
background-image:url(nav-bg-tertiary.png);
You'd need to condense those into one sprite. But once you apply a transition to background and adjust the background position, the background slides rather than fades. So depending on the effect you're going for - transitioning the background may not be the best option for you.
Instead -- what you may need to do is use some nested empty container elements. It's not semantically nice but it could achieve what you want if you want to use CSS transitions to perform a cross fade.
<ul id="navigation-list">
<li><a class="navigation-button" id="nav-button-1" href="#">HOME</a><span class="initial"></span><span class="secondary"></span><span class="tertiary"></span></li>
...
</ul>
The CSS then would be:
.navigation-button { position: relative; }
.initial, .secondary, .tertiary {
bottom: 0;
left: 0;
opacity: 0;
position: absolute
right: 0;
top: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
z-index: -1;
}
.initial { background-image:url(nav-bg-initial.png); }
.secondary { background-image:url(nav-bg-secondry.png); z-index: -2; }
.tertiary { background-image:url(nav-bg-tertiary.png); z-index: -3; }
And then you'd toggle their appearances like this:
#navigation-buttons:hover #nav-button-1 .tertiary { opacity: 1; }
It's a bit more work but you'd have to do something along those lines to cross fade different background images at various positions without getting a slide effect.