CSS3 несколько фонов не работает

Question

Я пытаюсь создать простой div с двумя фонами, используя CSS3. Я создал JS Fiddle с примером того, что я пытаюсь сделать здесь: http://jsfiddle.net/nfcyv/

Однако это не работает, и я надеялся, что кто-нибудь может указать, почему или дать мне полезную подсказку.

Ниже приведена копия 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 }

Answer 1

Вы можете указать цвет фона только для последнего слоя, поэтому вам нужно удалить первый #000 из вашего объявления:

#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
}

Обновленная скрипка

Answer 2

Попробуйте это

#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;
}