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

Раздел: Фоновая картинка

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

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

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

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

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

Фоновая картинка

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

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

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

XHTML 1.0CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <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>

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

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

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

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

фон

Если вам понравились материалы сайта, вы можете поддержать сайт, купив Рецепты CSS в формате CHM или в виде набора HTML-файлов за 50 р.