Цвет фона
Цвет фона является дастаткова важным элементом любой web-страницы. Во-первых, он задает нужное настроение и общий настрой с нашего сайта, а во-вторых, облегчает восприятие контента.
Цвет фона web-страницы задается с использованием параметра bgcolor тега <BODY>.
Пример 1. Изменение цвета фона
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Цвет фона</title>
</head>
<body bgcolor="#c0c0c0">
<p>...</p>
</body>
</html>
Цвет можно указывать в шестнадцатеричном значении или по его имени.
Несмотря на то, что для фона можно указывать любой цвет, на большинстве сайтов используются преимущественно белый фон и черные буквы, как наиболее устоявшийся вариант.
Фоновый рисунок
В качестве фона можно использовать любое подходящее для этого изображение. Фон не должен отвлекать внимание от контента, при этом должен хорошо сочетаться с цветовой гаммой web-страницы и быть маленьким по размеру, чтобы быстро загружаться. Если после перечисленного вы все еще хотите добавляем фоновый рисунок на страницу, следует применить параметром background тега <BODY>.
Пример 2. Добавление фонового рисунка
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Фоновый рисунок</title>
</head>
<body background="image/samplebg.gif">
<p>...</p>
</body>
</html>
Если изображение меньше размера экрана монитора, оно будет размножено по горизонтали и вертикали.
Поскольку фоновый рисунок загружается медленнее, чем цвет фона, может получиться, что контент не будет читаться некоторое время, пока не произойдет загрузка рисунков. То же самое может случиться и при отключенных в браузере рисунках. Поэтому рекомендуется всегда задавать цвет фона наряду с фоновым рисунком (пример 3).
Пример 3. Использование фонового рисунка и цвета фона
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Цвет фона</title>
</head>
<body bgcolor="#c0c0c0" background="image/samplebg.gif">
<p>...</p>
</body>
</html>
Фиксированный фон
По умолчанию, при использовании полосы прокрутки, фоновый рисунок перемещается вместе с содержимым web-страницы. Internet Эксплорер позволяет сделать фон неподвижным с помощью параметра bgproperties="fixed" тега <BODY>.
Пример 4. Задание фиксированного фона
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Фон</title>
</head>
<body bgcolor="#c0c0c0" background="image/samplebg.gif" bgproperties="fixed">
<p>...</p>
</body>
</html>
При указании параметра bgproperties, как показано в примере 4, фоновый рисунок на web-странице будет оставаться неподвижным, а контент, рисунки и другие элементы станут перемещаться вместе с полосой прокрутки.
Статья опубликована: 04.09.2009 | Последнее обновление: 07.02.2009 |