Фоновое изображение с узором смещено, как решить эту проблему? ⇐ CSS

[Anonymous]

Я пытаюсь создать простой фоновый шаблон для элемента div, используя фоновое изображение. Узор состоит из диагональных линий, которые плавно повторяются по всему элементу div. Однако когда изображение повторяется, диагональные линии не выравниваются должным образом, и в местах стыка плиток наблюдается заметное смещение, что приводит к разрыву рисунка.
Я проверил свой SVG. файл в Illustrator, повторяя узор в сетке, и он идеально выравнивается. Однако в браузере он выглядит смещенным.


(слева): шаблон, который я использую, (справа): пример в иллюстраторе, который соответствует



шаблон на сайте
CSS-код:
.about-pattern-container {
position: absolute;
width: 55%;
height: 250px;
z-index: -1;
background-image: url("./images/line-pattern-2.svg");
background-size: 5%;
right: 7%;
}

SVG-файл:





Подробнее здесь: https://stackoverflow.com/questions/791 ... i-solve-it