HTML конструювання Колір фону є досить важливим елементом будь-якої веб-сторінки. По-перше, він задає потрібний настрій і загальний настрій сайту, а по-друге, полегшує сприйняття тексту.
Колір фону веб-сторінки задається з використанням атрибута bgcolor тега <body>.
Приклад 1. Зміна кольору фону
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Колір фону</title> </head> <body bgcolor="#c0c0c0"> <p>...</p> </body> </html>
Колір можна вказувати в шістнадцятковому значенні або по його імені. Див. статтю кольори.
Незважаючи на те, що для фону можна вказувати будь-який колір, на більшості сайтів використовуються переважно білий фон і чорні букви, як найбільш усталений варіант.
Фоновий малюнок
В якості фону можна використовувати будь-яке підходяще для цього зображення.
Фон не повинен відволікати увагу від тексту, при цьому повинен добре поєднуватися з колірною гамою веб-сторінки і бути маленьким за розміром, щоб швидко завантажуватися.
Якщо після перерахованого ви все ще хочете додати фоновий малюнок на сторінку, слід скористатися атрибутом background тега <body>.
Приклад 2. Додавання фонового малюнка
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Фоновий малюнок</title> </head> <body background="images/bg.jpg"> <p>...</p> </body> </html>
Подивитися урок Конструктор документів
Якщо зображення менше розміру екрану монітора, воно буде розмножено по горизонталі і вертикалі.
Оскільки фоновий малюнок завантажується повільніше, ніж колір фону, може вийти, що текст не буде читатися деякий час, поки не відбудеться завантаження малюнків.
Те ж саме може статися і при відключених в браузері малюнках. Тому рекомендується завжди задавати колір фону поряд з фоновим малюнком (приклад 3).
Приклад 3. Використання фонового малюнка і кольору фону
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Колір фону</title> </head> <body bgcolor="#c0c0c0" background="images/bg.jpg"> <p>...</p> </body> </html>
Фіксований фон
За замовчуванням, при використанні смуги прокрутки, фоновий малюнок переміщується разом з вмістом веб-сторінки. Internet Explorer дозволяє зробити фон нерухомим за допомогою атрибуту bgproperties = "fixed" тега <body>.
Приклад 4. Завдання фіксованого фону
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Фон</title> </head> <body bgcolor="#c0c0c0" background="images/bg.jpg" bgproperties="fixed"> <p>...</p> </body> </html>
При вказівці атрибуту bgproperties, як показано в прикладі 4, фоновий малюнок на веб-сторінці буде залишатися нерухомим, а текст, малюнки та інші елементи стануть переміщатися разом зі смугою прокручування.