несколько фоновых изображений с линейным переполнением градиента

Question

My codepen показывает это изображение второстепенных страниц с 2-мя кратным фоном, содержащим линейный градиент. Проблема заключается в том, что при изменении размера браузера изображение уменьшается, а линейный градиент остается той же высоты. Как я могу динамически изменять высоту градиента в соответствии с 1-й высотой изображения?

Примечание: я не хочу использовать background-size: cover, так как он отсекает слишком большую часть изображения.

Разрыв кузова (цвет: # 454545) между навигационной панелью и фоновым изображением, как представляется, определен для кодирования. Он не появляется, когда я запускаю веб-страницу локально.

Answer 1

Основываясь на моем опыте, CSS не настолько гибкий, когда меняется окружающая среда. На мой взгляд, возникают два решения.

1. Использование JS добавить встроенный CSS динамически на основе текущего размера коробки
2. Создание нескольких медиа-запрос на основе ваших потребностей