Доброй день уважаемые. Помогите понять где я допускаю ошибку в моём простом примере:
.main {
width: 100%;
height: 100%;
position: relative;
top: 0;
background: #ED7D31 url("#backgroundLines") 50% 50% repeat;
box-sizing: border-box;
}
.st0 {
fill: none;
stroke: #000000;
stroke-width: 1;
stroke-miterlimit: 10;
}
<div class="main"></div>
<svg version="1.1" id="backgroundLines" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2 12" style="enable-background:new 0 0 2 12;" xml:space="preserve">
<path class="st0" d="M3,6"/>
<path class="st0" d="M-1,6"/>
<path class="st0" d="M3,11"/>
<path class="st0" d="M-1,11"/>
<line class="st0" x1="0" y1="5" x2="2.5" y2="5"/>
<line class="st0" x1="0" y1="11" x2="2.5" y2="11"/>
</svg>
Необходимо сделать, чтобы на весь экран были повторяющиеся фон созданный из горизонтальных линий (по вертикале). Линии сделанны в векторе толщиною в 1px через каждые 5рх. Не могу понять где я допускаю ошибку, и почему оно растягивается на всю область? (сейчас они явно не в 1рх)