Пора в школу!
Создадим два файла SVG - красную вертикальную линию и синие горизонтальные линии.
Красная вертикальная линия - задаём левый отступ. Файл red-line.svg:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<line x1="15" y1="0" x2="15" y2="16" stroke-thickness="2" stroke="rgba(220,0,0,0.3)" />
</svg>
Файл blue-line.svg для синих горизонтальных линий. Обратите внимание, что мы не используем viewBox и используем 100% для параметра x2 синей линии. Цвет задан в rgba, позволяя "размочить" фон.
<svg xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="15" x2="100%" y2="15" stroke-thickness="2" stroke="rgba(0,0,220,0.3)" />
</svg>
Используем два созданных файла вместе.
body {
background-image: url(blue-line.svg), url(red-line.svg);
background-size: 100vw 1.5em, 32px 32px;
background-repeat: repeat, repeat-y;
background-position: 0 0, 64px 0;
font: 200%/1.5 Bradley Hand, Segoe Script, cursive;
margin-left: 120px; margin-right: 100px;
}
background-size синей линии использует 100% ширины документа и высоту 1.5em.
Горизонтальные линии повторяются по горизонтали и вертикали. Красная линия только по вертикали.
Синяя линия начинается в левого верхнего угла, красная линия имеет отступ 64 пикселя слева.
Шрифт использует первый параметр для размера шрифта, второй - его высота, которая соответствует высоте, заданной в background-size.
Пример полностью адаптивный при увеличении или уменьшении размеров страницы.
Для демонстрации ограничимся контейнером.
Можете подгонять различные настройки под себя, чтобы было красиво.
Вернуться в раздел SVG в качестве фонового рисунка.