фонові малюнки

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

Фон на web-сторінці

Установка фонового малюнка на web-сторінку традиційно відбувається через параметр background тега . Такий малюнок повторюється по горизонталі і вертикалі, заповнюючи таким способом все вікно браузера. Зрозуміло, що особливих наборів для творчості тут немає, тому звернемося до стилів і подивимося, що ж можна робити за допомогою CSS (ЦСС).

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

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

Мал. 1. Фонова картинка без повторення

Щоб встановити картинку на web-сторінку, слід додаємо параметр background до селектора BODY. як показано в прикладі 1.

Приклад 1. Шпалери

В даному прикладі графічний малюнок pic.gif визначається як фон web-сторінки без повторення імаго. Щоб картинка не прилягала щільно до країв браузера, вона зміщується на 30 пікселів вправо і на 20 пікселів вниз від свого початкового положення.

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

Завдяки тому, що можна задавати повторення фонового малюнка по горизонталі або вертикалі, є кілька наборів оформлення web-сторінок. Наприклад, для розробки вертикальної смуги по ліво стороні (рис. 2) знадобиться зображення, показане на рис. 3.

Мал. 2. Повторення малюнка по вертикалі

Мал. 3. Картинка для розробки фону

Малюнок повинен бути таким, щоб по вертикалі він стикуються між собою без помітних швів, а також складав єдине ціле із заданим кольором фону web-сторінки. У прикладі 2 наводиться створення такого фонового малюнка, знову ж за допомогою параметра background і його аргументу repeat-y.

Приклад 2. Повторення фону по вертикалі

Аналогічно можна робити повторення фону по горизонталі, наприклад, створивши градієнт і встановивши його в якості фонової картинки (рис. 4).

Мал. 4. Використання градієнта в якості фону

Щоб отримати web-сторінку, наведену на рис. 4, потрібно спочатку зробити картинку з градієнтним переходом. Ширину дастаткова вказати 20-40 пікселів, а висота малюнка залежить від мети об'єкта і передбачуваної висоти вмісту web-сторінки. Не варто також забувати, що малюнок великого розміру призведе до збільшення обсягу графічного файлу. А це негативно позначиться на швидкості його завантаження і, в кінцевому підсумку, призведе до уповільнення відображення фону. Для даного випадку цілком підійшла картинка розміром 30х200 пікселів (рис. 5).

Мал. 5. Градієнтне зображення для розробки фону

У прикладі 3 показаний код ШТМЛ для розробки градиентного фону.

Приклад 3. Повторення фону по горизонталі

DIV margin: auto; / * Відступ навколо блоку * /
width: 75%; / * Ширина блоку * /
height: 90%; / * Висота блоку * /
text-align: left; / * Вирівнювання контенту по ліво стороні * /
padding: 10px; / * Поля навколо контенту * /
background: white; /* Колір фону */
>

Метод найшвидшого малюнок добре поєднується з одноколірним блоком, тому в даному прикладі додається шар, в якому і відображається вміст web-сторінки.

Додавання малюнка до контенту

За допомогою фонового імаго можна автоматизувати процес додавання малюнків до певного контенту, наприклад, до заголовків. Для цього використовується універсальний параметр background. який застосовується до потрібного селектору. Як значення вказують шлях до малюнка і, щоб він не повторювався, аргумент no-repeat (приклад 4).

Приклад 4. Додавання малюнка

Заголовок

основний контент

Як показано в даному прикладі, малюнок можна зрушувати по горизонталі і вертикалі щодо свого вихідного положення, за замовчуванням це лівий верхній кут блокового елемента. Це дозволяє встановити зображення по відношенню до контенту бажаним чином. Щоб контент не накладається на малюнок, обов'язково слід додаємо параметр padding-left. за рахунок нього контент зміщується вправо на вказану відстань. Воно в кожному випадку індивідуально і зазвичай дорівнює ширині малюнка і бажаному відступу між зображенням і контентом.

При додаванні картинки вказаним способом слід враховувати, що розмір контенту в браузері може мінятися, а, отже, зміниться і положення малюнка щодо контенту. Крім того, висота імаго обмежена висотою контенту, тому малюнок при зміні розміру контенту буде відображатися інакше. На рис. 6 показаний вигляд і положення картинки і контенту при його різній величині.

Мал. 6. Відображення картинки при зміні розмірів контенту

Видно, що при збільшенні розміру заголовка, зображення книжки і контент змінюють своє початкове положення. Такий розкид можна знизити, якщо в якості одиниці вимірювання застосовувати em. оскільки ця одиниця прив'язана до висоти контенту.

Якщо додається висока картинка, то при зменшенні контенту вона «обрізається» знизу, а потім, при збільшенні розміру, малюнок відображається повністю.