Несмотря на наличие в спецификации CSS2 возможности применения к документу более одного фонового изображения, в действительности ее поддержка реализована в единственном браузере – Safari от Apple. Что же делать при возникновении необходимости в одновременном использовании двух изображений – допустим, одно используется для заполнения всей области, а другое отображается статично?

Решение
Имитировать эффект использования нескольких фоновых изображений можно путем их задания для разных вложенных элементов, какими являются, например, html и body:

html {
background-image: url(background-repeatx.jpg);
background-repeat: repeat-x;
background-color: #D2D7E4;
}

body {
font: 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
background-image: url(xoops.gif);
background-repeat: no-repeat;
background-position: 98% 2%;
margin: 0;
padding: 46px 0 0 0;
}

Результат применения данных правил показан на рис. 3.13.

Рис. 3.13. Добавление фоновых изображений для элементов html и body

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

Многие из предлагаемых на сайте CSS Zen Garden решений основаны именно на такого рода игре с фоновыми изображениями.