Получение фонового изображения для растягивания по вертикали

Question

Я создал веб-страницу с некоторым простым CSS с полосатым изображением (ширина 62 пикселя и высота 32 пикселя), и я хочу, чтобы он повторялся вертикально вплоть до нижней части страницы. Моя проблема в том, что она останавливается в конце содержимого, например, если я поставлю «Тест», это будет очень мало. Если у меня будет целый эссе, он будет повторяться с ним - но не так много, если страница не прокручивается.

Изображение: http://avaworld.net/images/bordLeft-blue.png

Сайт - http://www.avaworld.net/

#blueWrap { margin: 0; background-color: #131313; padding: 0; display: block; }

#blueRight { padding-right: 62px; background: url(http://avaworld.net/images/bordRight-blue.png) top right repeat-y; }

#blueLeft { padding-left: 62px; background: url(http://avaworld.net/images/bordLeft-blue.png) top left repeat-y; }

<div id="blueWrap"> 
    <div id="blueRight"> 
     <div id="blueLeft"> 
     Test 
    </div> 
    </div> 
</div> 

Answer 1

Применить это ваш CSS

body, #blueWrap, #blueRight, #blueLeft{height:100%;} 

Answer 2

Проблема с body, #blueWrap, #blueRight, #blueLeft{height:100%;} в том, что, когда у вас есть много контента, в blueRight и blueLeft элементы не будут следовать страницы при прокрутке.

Для атрибутов blueRight и blueLeft, в их CSS попробуйте добавить: position: fixed; height: 100%;

position: fixed; означает, что div будет оставаться на том, что точное положение даже при прокрутке.

height: 100%; должен сделать высоту 100%.