CSS3 несколько фонов?

Question

Согласно QuirksMode , определение нескольких фонов работает (по крайней мере) в IE9, Chrome и Firefox 3.6.
У меня есть следующий CSS:

background: #190110 url("http://static.pokefarm.org/_img/gradients/dark_sky.png") repeat-x fixed left top;
background: url("http://static.pokefarm.org/_img/gradients/dark_edge.png") no-repeat fixed -16px bottom, url("http://static.pokefarm.org/_img/gradients/dark_edge.png") no-repeat fixed right -16px bottom, url("http://static.pokefarm.org/_img/gradients/dark_ground1.png") repeat-x fixed left bottom, url("http://static.pokefarm.org/_img/gradients/dark_ground2.png") repeat-x fixed left 50px bottom 50px, url("http://static.pokefarm.org/_img/gradients/dark_ground3.png") repeat-x fixed left bottom 200px, url("http://static.pokefarm.org/_img/gradients/dark_lightning.png") no-repeat fixed right -100px top -150px, #190110 url("http://static.pokefarm.org/_img/gradients/dark_sky.png") repeat-x fixed left top;

Это довольносложный фон, но он должен создать эффект фона "Темный мир" для моей онлайн-игры.По сути, это три разных «наземных» слоя, градиентное небо, два «края», которые как бы затухают над краями экрана, и молния.Старые браузеры должны видеть только градиентный фон «темного неба».
Полученный эффект должен быть следующим: Снимок экрана .

Теперь проблема: IE9 отлично отображает этот эффект и можетдаже сделать необязательный эффект «анимированный фон», когда слои земли прокручиваются в параллаксе, а молния мигает и искажается с помощью CSS-преобразований.Однако в Firefox 6 и Chrome 13 отображается только резервный фон только для градиента.

Кто-нибудь знает, почему это происходит?

Answer 1

Чтобы ответить на мой собственный вопрос, ни Chrome, ни Firefox не поддерживают более двух значений в background-position.Заставляет меня задуматься, как бы они разместили фоновое изображение относительно правого нижнего угла ...

Answer 2

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

Хотя я не уверен, существовала ли поддержка, когда вопрос был задан впервые.

Похоже, что поддержка сейчас довольно стабильна. http://caniuse.com/#feat=multibackgrounds

background-image: url(image1.png), url(image2.png);
background-position: center bottom, left top;

Вы разделяете фоновые позиции запятой в порядке, определенном в background-image