Каскадні таблиці стилів (CSS) рівня 3, також відомий як CSS3, представляє підтримку декількох фонових зображень. Ви можете перерахувати кілька фонових зображень, розділяючи кожне комами, і встановити спосіб їх відображення, використовуючи такі властивості фону, як "background-position" і "background-repeat". Поки кожне набір значень відповідає порядку URL-адрес зображення, ці властивості дадуть передбачувані ефекти. Ви також можете використовувати "background-attachment", щоб зробити фон фіксованим на екрані, коли користувачі прокручують вгору або вниз.
1
Відкрийте свою веб-сторінку в Блокноті або редакторі коду, щоб побачити її код. Шукайте елемент HTML, де ви хочете застосувати кілька фіксованих фонів, і знайдіть його ідентифікатор:
Зміст ...2
Прокрутіть угору до коду та знайдіть тег, який "" посилається на вашу таблицю стилів:
Знайдіть ім’я таблиці стилів, яку потрібно редагувати, в атрибуті "href" тегу "". Якщо ваш код містить кілька тегів, "" шукайте той, який вказує на вашу загальну таблицю стилів, а не файли з іменами, як "друк" або "IE".
3
Відкрийте таблицю стилів у Блокноті або редакторі коду. Шукайте в коді ім’я ідентифікатора вашого елемента HTML. Додайте цей селектор унизу коду, якщо ви його не знайдете:
}
4
Встановіть властивість "background-image" між фігурними дужками після вашого селектора:
фонове зображення: URL (шлях / до / першого bg.png), URL (шлях / до / другого-bg.png);
}
Відокремте кожну URL-адресу комою, щоб перерахувати кілька фонових зображень. Встановіть шлях у кожній дужці до URL-адреси фонового зображення, яке потрібно використовувати.
5
Почніть порожній рядок нижче "background-image" і додайте властивість "background-position":
фонове положення: вгорі ліворуч, 100px 200px;
Встановіть положення кожного фону в тому самому порядку, як вони відображаються у списку URL-адрес "фонове зображення". У наведеному вище прикладі "first-bg.png" налаштовано на відображення у верхньому лівому куті елемента HTML. Потім "second-bg.png" відобразить 100 пікселів зверху та 200 пікселів від лівого краю елемента HTML. Ви також можете використовувати відсоткові значення, такі як "80% 20%".
6
Встановіть "background-attachment" під властивістю "background-position":
фон-вкладення: виправлено, прокрутка;
Використовуйте "виправлено", коли ви хочете, щоб фонове зображення зберігалося на екрані, навіть коли користувач прокручує веб-сторінку вгору або вниз. Параметр за замовчуванням - "прокрутка".
7
Додайте новий рядок нижче "background-attachment" та додайте властивість "background-repeat". Встановіть для цієї властивості значення "не повторювати" для кожного фонового зображення, яке не потрібно викладати плиткою:
background-repeat: no-repeat, repeat-x;
Використовуйте "repeat-x" або "repeat-y", щоб повторити зображення через вісь "Y" (вертикальна) або "X" (горизонтальна) елемента HTML.
