Комофртабельная офисная мебель для персонала - кресла антиусталость.

Разделы

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

Метки:

фон

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

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

занимать по высоте не меньше 20–30 пикселов;
при стыковке с аналогичным фрагментом изображения по вертикали не должно быть видимых стыков.

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

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

Рис. 1

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

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

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

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

Результат данного примера показан на рис. 2.

Рис. 2

Рис. 2. Вид фона, повторяющегося по вертикали

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

Кун, 22.08.2008

Как часто я заходил в тупик, когда нужен был этот эффект для резиновой таблицы, но не получалось. Спасибо!

Разделы

Термины

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

Отправить комментарий