Фонові зображення

Влад Мержевич

У зв'язку з особливостями веб-сторінок, фонові малюнки набувають значущої ролі при верстці документів сайту. Вони активно беруть участь у різних аспектах, наприклад, автоматизують процес додавання малюнків до тексту, створюють градієнтні переходи і, звичайно ж, додають фон під вмістом. Далі розглянуті деякі аспекти використання фонових зображень.

Фон на веб-сторінці

Встановлення фонового малюнка на веб-сторінку традиційно відбувається через атрибут background тега <body>. Такий малюнок повторюється по горизонталі та вертикалі, заповнюючи таким чином усе вікно браузера. Розглянемо, які можливості надає CSS.

У CSS існує п'ять атрибутів, які керують фоновим зображенням: його додаванням, положенням та повторенням. Однак всі ці параметри заміщує одне універсальне властивість background, яке ми і будемо використовувати в майбутньому.

Додавання фонового малюнка

Додавання малюнка відбувається шляхом встановлення адреси зображення через ключове слово url. Щоб керувати повторенням зображення, використовуються аргументи no-repeat (без повторення), repeat-x (повторення по горизонталі) та repeat-y (повторення по вертикалі).

Повторення малюнка

Внаслідок можливості задавати повторення фонового зображення по горизонталі або вертикалі, доступно кілька варіантів оформлення веб-сторінок.

Додавання зображення до тексту

За допомогою фонового зображення можна автоматизувати процес додавання малюнків до певного тексту, наприклад, до заголовків.

зображення CSS фон вёрстка

Часті запитання