Сьогодні, практично в кожному дизайні сайту присутній красива background картинка.
Кожен верстальник знає, що найпростіший спосіб створення дизайну - найкраще, що може бути. Одним з простих і зручних технік є розтягування background на весь екран. за допомогою кількох рядків css коду.
Здавалося б, дрібниця, але все ж, часом потрібно створити щось складне простим способом. Наприклад, реалізувати кілька background з індивідуальними параметрами, без використання допоміжних div блоків. Тобто, зберігаючи семантичну верстку.
У цій статті ми розглянемо синтаксис коду, який підтримує декілька background (multiple backgrounds) в одному елементі. Ось, як це виглядає в реалії:
CSS код для multiple backgrounds
Кілька background картинок реалізуються за допомогою декількох значень css параметра background, які розділені комою:
Я намагався зробити так само, за допомогою короткого коду. На жаль, не працює.
Плюс до цього, можна використовувати інші властивості background (background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size). Так само, як і в CSS градієнтах.
От і все! Сподіваюся вам сподобалася ця техніка створення декількох background, без використання будь-яких допоміжних елементів. Чистий семантичний код.