Браузеры, поддерживающие несколько фонов (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 на Mac будет отображать первый фон в списке, но другие браузеры, которые его не поддерживают, терпят неудачу и просто не отображают фон. Это затрудняет прогрессивное улучшение. То есть, если вы не используете такой инструмент, как Modernizr, чтобы обнаружить его поддержку и написать резервный селектор, который объявляет только один фон для браузеров, которые его не поддерживают.