CSS3 multiple backgrounds not working

Problem

I am trying to create a simple div with two backgrounds using CSS3. I have created a JS Fiddle with an example of what I'm trying to do here: http://jsfiddle.net/nfcyv/

It is not working, however, and I was hoping somebody could point out why or provide me with a helpful hint.

Below is a copy of the CSS:

#box { background:url("http://i.imgur.com/pAmGs.png") no-repeat scroll center bottom #000, url("http://i.imgur.com/fDMpm.png") repeat scroll 0 0 #000;height:500px;width:500px }
Problem courtesy of: John

Solution

You can only specify a background color for the last layer, so you need to remove the first #000 from your declaration:

#box {
    background:url("http://i.imgur.com/pAmGs.png") no-repeat scroll center bottom, 
               url("http://i.imgur.com/fDMpm.png") repeat scroll 0 0 #000;
    height:500px;
    width:500px
}

Updated fiddle

Solution courtesy of: BoltClock

Discussion

Try this one

#box { 
    background:url("http://i.imgur.com/pAmGs.png") no-repeat center bottom, 
    url("http://i.imgur.com/fDMpm.png") repeat scroll 0 0 #000;
    height:500px;width:500px;
}
Discussion courtesy of: w3uiguru

This recipe can be found in it's original form on Stack Over Flow.