Браузери, що підтримують кілька фонів (WebKit з самого початку, Firefox 3+), використовують такий синтаксис:
#box ( background: url(icon.png.webp) top left no-repeat, url(texture.jpg.webp), url(top-edge.png.webp) top left repeat-y; )Вони мають значення, розділені комами, і їх може бути скільки завгодно з різними значеннями URL-адрес, позиціонування та повторення. Ви навіть можете поєднати градієнти WebKit у суміш:
#box ( background: url(… /images/arrow.png.webp) 15px center no-repeat, -webkit-gradient(linear,left top,left bottom,color-stop(0, #010101),color-stop(1, #181818)); )IE Old School на Mac відображатиме перший фон у списку, але інші браузери, які не підтримують його, сильно зазнають невдач і просто не відображають фон. Це ускладнює прогресивне вдосконалення. Тобто, якщо ви не використовуєте такий інструмент, як Modernizr, щоб виявити підтримку для нього та написати резервний селектор, який оголошує лише один фон для браузерів, які його не підтримують.