Повторение фонового изображения

Свойство background-repeat устанавливает характер повторения фонового изображения выводимого с помощью свойства background-image. С помощью данного свойства можно установить направление, в котором будет повторяться рисунок. Повторение фонового изображения возможно только по горизонтали или по вертикали, а так же в обе стороны.

background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: space;
background-repeat: inherit;
background-repeat: no-repeat;

repeat – этот параметр указывает на то что фоновый рисунок будет повторяться одновременно по горизонтали и вертикали.

repeat-x – значение задающее повторение только по горизонтали.

repeat-y – значение задающее повторение только по вертикали.

space – параметр задаёт повторение изображения до тех пор пока не заполнится свободная область.

inherit – параметр наследования.

no-repeat – запрет на повторение фонового изображения.

Повторение по вертикали

В данном примере фоновое изображение, специально подготовленное в программе Photoshop размеры которого составляют 180 × 1 пиксель, повторяется по вертикали с помощью параметра repeat-y.

HTML

<h1>Повторение рисунка</h1>

CSS

* {	
    margin: 0;
    padding: 0;
}
body {	
    padding-top: 55px;
    background-repeat: repeat-y;
    background-image: url(/images/horizontal-strip.jpg);
    font-family: Arial, Helvetica, sans-serif;
}
h1 {
    color: #333;
    font-size: 32px;
    text-align: center;
}