Как сделать, чтобы фон повторялся только по вертикали?

🕛 23.01.2009, 00:07

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

Предварительно следует подготовить фоновый рисунок, который должен удовлетворять ряду условий:

занимать по высоте не меньше 20-30 пикселов;
при стыковке с аналогичным фрагментом изображения по вертикали не должно быть видимых стыков.
Поясним про высоту фоновой картинки. Если сделать изображение слишком узким (2-3 пиксела), то при отображении фона эффект его появления будет заметен невооруженным глазом. Увеличение высоты позволяет замостить фон элемента быстро и неприметно.

В качестве образца фона возьмем градиент, показанный на рис. 1.

Рис. 1. Фоновая картинка

За повторение фона отвечает стилевой атрибут background-repeat, его значение repeat-y как раз и обеспечивает нужное нам повторение по вертикали. Аналогично можно воспользоваться универсальным атрибутом background, который одновременно задает путь к графическому файлу, повторение фона, а также его расположение относительно элемента (пример 1).

Пример 1. Повторение фона

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!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 { padding-left: 100px; /* Поле слева */ background: url(images/bg-green.png) repeat-y; /* Путь к графическому файлу и повторение фона по вертикали */ } </style> </head> <body> <p>Человек должен уметь иногда посмеяться над собой, иначе он сойдет с ума. Об этом, к сожалению, знают немногие, поэтому в мире так много сумасшедших.</p> <p>Рафаэль Сабатини</p> </body>
</html>

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