В Google Chrome появляется горизонтальная полоса под background-image

Question

HTML

<div class="light_section">
    <h2>Заголовок</h2>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-10 col-11">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
            </div>
            <div class="row justify-content-around section_content_line">
                <div class="col-lg-3 col-sm-6 col-12 section_content_block">
                    <p>Lorem ipsum</p>
                </div>
                <div class="col-lg-3 col-sm-6 col-12 section_content_block">
                    <p>Lorem ipsum</p>
                </div>
                <div class="col-lg-3 col-sm-6 col-12 section_content_block">
                    <p>Lorem ipsum</p>
                </div>
            </div>
            <div class="row justify-content-center section_content_line">
                <div class="col-xl-10 col-11">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
            </div>
        </div>
</div>

CSS стили блока:

.light_section {
  padding-top: 120px;
  padding-bottom: 120px;
  background-color: #36979a;
  background-image: url("/img/bg.png"), url("/img/bg_btm.png");
  background-position: top center, bottom center;
  background-size: 100%;
  background-repeat: no-repeat;
  text-align: center;
}

.light_section h2 {
  text-align: center;
  color: #0b101d;
}

.light_section p {
  text-align: justify;
  line-height: 1.7;
}

.section_content_line {
  margin-top: 50px;
}

.section_content_block {
  padding: 10px 20px;
}

.section_content_block p {
  text-align: center;
}

Появляется следующая проблема в браузере google chrome:

в firefox все в порядке (скриншот ниже)

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

Стоит упомянуть, что полоса появляется не на всех блоках с вышеописанными стилями на сайте, и на некоторых блоках полоса при просмотре с ноутбука не видна, но на том же блоке, при просмотре с мобильного устройства полоса присутствует.

Также, эта полоса пропадает при изменении масштаба страницы в меньшую или большую сторону, но при 100% масштабе она есть.

Нашел одно решение: убрал у основного блока padding-top, и добавил такой же отступ заголовку h2, вроде бы помогло, но по моему это костыль.

Помогите советом

Answer 1

поскольку изображения прижаты к краям, при изменении ширины блока они не могут перекрывать все пространство и при уменьшении ширины становится недостаточной высота изображений, чтобы перекрыть высоту блока. https://jsfiddle.net/romanown/kgzw26t0/6/. как вариант предлагаю ограничить минимальную ширину блока. при данном построении разметки это поможет, хотя так же является костылем. https://jsfiddle.net/romanown/kgzw26t0/9/ или переделать полностью весь блок или использовать одно фоновое изображение. весь код не привожу, поскольку он такой же как и в вопросе за исключением изображений и ограничения минимального размера. (добавил код в сниппет). в хроме видно стало потому что он несколько по другому масштабирует. но при уменьшении ширины блока в любом случае это станет видно и в фоксе.

    .light_section {
  padding-top: 120px;
  padding-bottom: 120px;
  background-color: #36979a;
  background-image: url("http://placehold.it/750x250"), url("http://placehold.it/750x250");
  background-position: top center, bottom center;
  background-size: 100%;
  background-repeat: no-repeat;
  text-align: center;
  min-width: 1100px;
}

.light_section {
  padding-top: 120px;
  padding-bottom: 120px;
  background-color: #36979a;
  background-image: url("http://placehold.it/750x250"), url("http://placehold.it/750x250");
  background-position: top center, bottom center;
  background-size: 100%;
  background-repeat: no-repeat;
  text-align: center;
  min-width: 1100px;
}

.light_section h2 {
  text-align: center;
  color: #0b101d;
}

.light_section p {
  text-align: justify;
  line-height: 1.7;
}

.section_content_line {
  margin-top: 50px;
}

.section_content_block {
  padding: 10px 20px;
}

.section_content_block p {
  text-align: center;
}

<div class="light_section">
    <h2>Заголовок</h2>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-10 col-11">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
            </div>
            <div class="row justify-content-around section_content_line">
                <div class="col-lg-3 col-sm-6 col-12 section_content_block">
                    <p>Lorem ipsum</p>
                </div>
                <div class="col-lg-3 col-sm-6 col-12 section_content_block">
                    <p>Lorem ipsum</p>
                </div>
                <div class="col-lg-3 col-sm-6 col-12 section_content_block">
                    <p>Lorem ipsum</p>
                </div>
            </div>
            <div class="row justify-content-center section_content_line">
                <div class="col-xl-10 col-11">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
            </div>
        </div>
</div>

БЛОГ НА HUSL

В Google Chrome появляется горизонтальная полоса под background-image

Ответы (1 шт):