Синтаксис нескольких фонов онлайн урок.


Браузеры, поддерживающие несколько фонов (WebKit с самого начала, Firefox 3+), используют синтаксис:

#box {
background:
url(icon.png) top left no-repeat,
url(texture.jpg),
url(top-edge.png) top left repeat-y;
}

Они являются значениями, разделенными запятыми, и может быть столько, сколько вы хотите, с разными значениями URL, позиционирования и повтора. Вы даже можете комбинировать градиенты WebKit в миксе:

#box {
background:
url(../images/arrow.png) 15px center no-repeat,
-webkit-gradient(linear,left top,left bottom,color-stop(0, #010101),color-stop(1, #181818));
}

В старой школе IE на Mac отобразится первый фон в списке, но другие браузеры, которые его не поддерживают, терпят неудачу и просто не отображают фон. Это делает его трудным для прогрессивного улучшения. То есть, если вы не используете такой инструмент, как Modernizr , чтобы обнаружить поддержку для него и написать резервный селектор, который объявляет только один фон для браузеров, которые его не поддерживают.