Фоновые рисунки

www-html.ru

Обычная версия

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

Фон на web-странице

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

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

Добавление фонового рисунка

Добавление рисунка происходит путем установки адреса картинки через ключевое слово url. Чтобы управлять повторением картинки применяются аргументы no-repeat (нет повторения), repeat-x (повторение по горизонтали) и repeat-y (повторение по вертикали). Благодаря этому можно получить web-страницу, приведенную на рис. 1.

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

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

Чтобы установить картинку на web-страницу, следует добавляем параметр background к селектору BODY, как показано в примере 1.

Пример 1. Фоновый рисунок

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Фоновое изображение</title>
<style type="text/CSS (ЦСС)">
BODY {
 background:
  url("pic.gif") /* Путь к графическому файлу */
  no-repeat /* Отменяем повторение рисунка */
  30px /* Смещаем рисунок вправо */
  20px; /* Сдвигаем рисунок вниз */
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>

В данном примере графический рисунок pic.gif определяется как фон web-страницы без повторения Имаги. Чтобы картинка не прилегала плотно к краям браузера, она смещается на 30 пикселов вправо и на 20 пикселов вниз от своего исходного положения.

Повторение рисунка

Благодаря тому, что можно задавать повторение фонового рисунка по горизонтали или вертикали, доступно несколько наборов оформления web-страниц. Например, для разработки вертикальной полосы по левоой стороне (рис. 2) понадобится изображение, показанное на рис. 3.

Рис. 2. Повторение рисунка по вертикали

Рис. 2. Повторение рисунка по вертикали

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

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

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

Пример 2. Повторение фона по вертикали

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Фоновое изображение</title>
<style type="text/CSS (ЦСС)">
BODY {
 background:
  #fc0 /* Цвет фона web-страницы */
  url("pic.gif") /* Путь к графическому файлу */
  repeat-y; /* Повторение по вертикали */
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>

Аналогично можно делать повторение фона по горизонтали, например, создав градиент и установив его в качестве фоновой картинки (рис. 4).

Рис. 4. Использование градиента в качестве фона

Рис. 4. Использование градиента в качестве фона

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

Рис. 5. Градиентное изображение для разработки фона

Рис. 5. Градиентное изображение для разработки фона

В примере 3 показан код ШТМЛ для разработки градиентного фона.

Пример 3. Повторение фона по горизонтали

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Фоновое изображение</title>
<style type="text/CSS (ЦСС)">
BODY {
 background:
  url("pic.gif") /* Путь к графическому файлу */
  repeat-x; /* Повторяем фон по горизонтали */
text-align: center; /* Выравнивание блока по центру */
}

DIV {
 margin: auto; /* Отступы вокруг блока */
 width: 75%; /* Ширина блока */
 height: 90%; /* Высота блока */
 text-align: left; /* Выравнивание контента по левоой стороне */
 padding: 10px; /* Поля вокруг контента */
 background: white; /* Цвет фона */
}
</style>
</head>
<body>

<div>
  Lorem ipsum...
</div>

</body>
</html>

Градиентный рисунок хорошо сочетается с одноцветным блоком, поэтому в данном примере добавляется слой, в котором и отображается содержимое web-страницы.

Добавление рисунка к контенту

С помощью фонового Имаги можно автоматизировать процесс добавления рисунков к определенному контенту, например, к заголовкам. Для этого используется универсальный параметр background, который применяется к нужному селектору. В качестве значения указывают путь к рисунку и, чтобы он не повторялся, аргумент no-repeat (пример 4).

Пример 4. Добавление рисунка

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Фоновое изображение</title>
<style type="text/CSS (ЦСС)">
H2 {
 background:
  url('sample.gif') /* Путь к изображению */
  no-repeat /* Не устанавливать повторение фона */
  1px /* Смещаем рисунок вправо */
  2px; /* Смещаем рисунок вниз */
 padding-left: 20px; /* Отступ слева от контента */
}
</style>
</head>
<body>

<h2>Заголовок</h2>
<p>Основной контент</p>

</body>
</html>

Как показано в данном примере, рисунок можно сдвигать по горизонтали и вертикали относительно своего исходного положения, по умолчанию это левый верхний угол блочного элемента. Это позволяет установить изображение по отношению к контенту желаемым образом. Чтобы контент не накладывался на рисунок, обязательно следует добавляем параметр padding-left, за счет него контент смещается вправо на указанное расстояние. Оно в каждом случае индивидуально и обычно равно ширине рисунка и желаемому отступу между изображением и контентом.

При добавлении картинки указанным способом следует учитывать, что размер контента в браузере может меняться, а, следовательно, изменится и положение рисунка относительно контента. Кроме того, высота Имаги ограничена высотой контента, поэтому рисунок при изменении размера контента будет отображаться иначе. На рис. 6 показан вид и положение картинки и контента при его разной величине.

Рис. 6. Отображение картинки при изменении размеров контента

Рис. 6. Отображение картинки при изменении размеров контента

Видно, что при увеличении размера заголовка, изображение книжки и контент меняют свое исходное положение. Такой разброс можно снизить, если в качестве единицы измерения применять em, поскольку эта единица привязана к высоте контента.

Если добавляется высокая картинка, то при уменьшении контента она «обрезается» снизу, а затем, при увеличении размера, рисунок отображается полностью.



Copyright © Все права засчищены
www.www-html.ru