Изображение получает четкий край при использовании фонового изображения: url() ⇐ CSS

[Anonymous]

На изображении ниже показан край, который немного светлее переднего плана, и я хочу его удалить.
Сейчас я добавляю свойство фона для отображения изображения вместе с линейный градиент, но по краям div проходит небольшая линия, отображающая изображение. Элемент div, выделенный серым цветом над изображением, является заголовком, он также занимает 100% ширины экрана и должен покрывать все изображение, но линия все равно отображается. Есть идеи, почему? :=)



Компонент Vue



Hello





import BasicContainer from '../../containers/BasicContainer.vue';
import ContentContainer from '../../containers/ContentContainer.vue';



.basic_container {
padding-top: var(--header_height); /* Move down from the header! */

background: linear-gradient(0deg, var(--overlay_color), var(--overlay_color)), url(/images/pages/home/Landing_Hero_Large_16_9.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;

width: 100%;
max-height: 100vh;
}

@media (max-width: 1280px) {
.basic_container {
background: linear-gradient(0deg, var(--overlay_color), var(--overlay_color)), url(/images/pages/home/Landing_Hero_Medium_3_2.jpg);
min-height: 100vh;
max-height: 100vh;

background-size: cover;
background-repeat: no-repeat;
}
}

@media (max-width: 640px) {
.basic_container {
background: linear-gradient(0deg, var(--overlay_color), var(--overlay_color)), url(/images/pages/home/Landing_Hero_Small_2_3.jpg);
max-height: 80vh;

background-size: cover;
background-repeat: no-repeat;
}
}


Базовый компонент контейнера







.basic_container {
width: 100%; /* Take up as much space as possible! */
}



Подробнее здесь: https://stackoverflow.com/questions/793 ... -image-url