Каскадные таблицы стилей (CSS) уровня 3, также известные как CSS3, вводят поддержку нескольких фоновых изображений. Вы можете перечислить несколько фоновых изображений, разделив их запятыми, и настроить их отображение, используя свойства фона, такие как «background-position» и «background-repeat». Пока каждый набор значений соответствует порядку URL-адресов изображений, эти свойства будут давать желаемый эффект. Вы также можете использовать «прикрепление фона», чтобы зафиксировать фон на экране при прокрутке вверх или вниз.
1
Откройте свою веб-страницу в Блокноте или редакторе кода, чтобы увидеть ее код. Найдите элемент HTML, к которому вы хотите применить несколько фиксированных фонов, и найдите его имя ID:
Содержание...2
Прокрутите код вверх и найдите тег "", который ссылается на вашу таблицу стилей:
Найдите имя таблицы стилей, которую вы хотите отредактировать, в атрибуте «href» тега «». Если ваш код включает несколько тегов, ищите тот, который указывает на вашу общую таблицу стилей, а не на файлы с именами вроде «print» или «IE».
3
Откройте таблицу стилей в Блокноте или в редакторе кода. Найдите в коде имя идентификатора вашего HTML-элемента. Добавьте этот селектор в конец вашего кода, если вы его не нашли:
}
4
Установите свойство "background-image" между фигурными скобками после селектора:
фоновое изображение: URL (путь / к / first-bg.png), URL (путь / к / second-bg.png);
}
Разделите каждый URL-адрес запятой, чтобы перечислить несколько фоновых изображений. Задайте путь в круглых скобках к URL-адресу фонового изображения, которое вы хотите использовать.
5
Начните пустую строку под "background-image" и добавьте свойство "background-position":
background-position: вверху слева, 100 пикселей 200 пикселей;
Установите положение каждого фона в том же порядке, в каком они появляются в списке URL-адресов "background-image". В приведенном выше примере «first-bg.png» настроен на отображение в верхнем левом углу элемента HTML. "Second-bg.png" затем отобразит 100 пикселей вниз от верха и 200 пикселей от левого края элемента HTML. Вы также можете использовать процентные значения, например «80% 20%».
6
Установите "background-attachment" под свойством "background-position":
фоновое прикрепление: фиксированное, прокрутка;
Используйте «фиксированный», если вы хотите, чтобы фоновое изображение оставалось на экране, даже когда пользователь прокручивает веб-страницу вверх или вниз. Настройка по умолчанию - «прокрутка».
7
Добавьте новую строку под «background-attachment» и добавьте свойство «background-repeat». Установите для этого свойства значение «no-repeat» для каждого фонового изображения, которое вы не хотите размещать мозаикой:
фон-повтор: нет-повтор, повтор-х;
Используйте «repeat-x» или «repeat-y», чтобы повторить изображение по оси «Y» (вертикальная) или «X» (горизонтальная) элемента HTML.
