Позиционирование заголовка CSS в соответствии с текстурой фона

Question

У меня есть фоновое изображение, которое выглядит как текстура, поэтому фоновое изображение должно точно продолжаться один за другим.Это хорошо, но основное содержание веб-страницы центрировано.Однако заголовок (с фиксированной шириной) перекрывает верхнюю часть фона.Следовательно, изображение заголовка не продолжается гладко с фоновым изображением.Мне нужна какая-то сетка или другое решение.

Здесь есть ссылка, вы можете проверить мою простую веб-страницу по этому вопросу:
пример веб-страницы

PS: Чтобы увидеть проблему, вам нужен широкоэкранный (минимум 1183 пикселей)

Спасибо.

Answer 1

1. Ваше изображение заголовка должно просто использовать прозрачность, а не пытаться точно копировать линии, и полностью избежать этой проблемы.

2. Если вы настаиваете, используйте background-position: 50% 0; на фоне тела, чтобы закрепить его в центре.Тогда независимо от того, какого размера экран, фоны останутся на одном и том же месте.Сделайте несколько настроек для изображения, и оно будет работать нормально.

Answer 2

Почему бы вам просто не извлечь этот повторяющийся по диагонали фон из фонового изображения, создать его в качестве другого изображения, поместить его в элемент div и сделать его индекс выше, чем фон и заголовок, чтобы он перекрывался?