Почему мои фоновые изображения не растягиваются по длине

Question

так что я видел ответы на этот вопрос, но они не работают на моем сайте.

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

Извиняюсь за появление большого количества кода, но я подумал, что лучше всего показать всю картинку.

Заранее спасибо за любую помощь.

html

<section class="about">
        <div class="row">
            <h2 id="trabajo">Cómo trabajo</h2>
            <p id="about-subheading">Déjame adivinar cómo quieres tu trabajo…</p>
        </div>

        <div class="about-container">
            <div class="col a"></div>
            <div class="col b">
                <i class="fas fa-plane"></i>
                <h3 class="about-h3">¿Lo quieres rápido?</h3>
                <p class="about-p">Una virtud que destaca en mí es mi lealtad por mi trabajo. Me gusta ser rápida contestándote y entregándote la
                grabación de tu proyecto.</p>
            </div>
            <div class="col c">
                <i class="fas fa-trophy"></i>
                <h3 class="about-h3">¿Quieres profesionalidad?</h3>
                <p class="about-p">La rapidez no es suficiente si no mantienes una ética de trabajo completa. Cuando amas lo que haces los clientes lo
                notan. ¡Echa un ojo a las opiniones de mis clientes!</p>
            </div>
            <div class="col d">
                <i class="fas fa-dollar-sign"></i>
                <h3 class="about-h3">¿Quieres un precio justo?</h3>
                <p class="about-p">Dependiendo del tipo de proyecto que tengas, el precio y la entrega variarán, ¡pero siempre será un precio justo y
                adaptado para ti!</p>
            </div>
            <div class="col e"></div>
        </div>

        <div class=row>
            <p class="your-voice">¡Entonces soy tu voz!</p>
            <div class="btn-container">
                <a href="#" class="quote">¡Pide tu presupuesto!</a>
            </div>
        </div>

    </section>

CSS

.about {
    height: 100vh;
    background-image: linear-gradient(rgba(237, 99, 117, 0.9), rgba(237, 99, 117, 0.9)), url(Images/thumbnail_section\ COMO\ TRABAJO.jpg); 
    background-size: cover; 
    background-attachment: fixed;
    background-position: center;
}

.about:after {
    position: absolute;
    width: 70px;
    height: 70px;
    top: 100%;
    left: 50%;
    margin-left: -35px;
    content: '';
    transform: rotate(45deg);
    margin-top: -35px;
    background-color: #D65A6A;

}

#trabajo {
    color: white;
    text-align: center;
    font-weight: 400;
    font-size: 150%;
    position: relative;
    margin-top: 10px;
    letter-spacing: 1px;
}

#about-subheading {
    text-align: center;
    position: relative;
    margin-top: 20px;
}

.about-container {
    display: grid;
    grid-template-columns: 120px 1fr 1fr 1fr 120px;
}

.col {
    text-align: center; 
    margin-top: 20px; 
    padding: 20px;
}


.fas {
    font-size: 200%;
    color: white;
}

.fa-plane {
    transform: rotate(320deg);
}


.about-h3 {
    margin-top: 30px;
    font-size: 100%;
    font-weight: 400;
}

.about-p {
    margin-top: 20px;
    font-size: 80%;
    line-height: 23px;
    font-weight: 100;
}

Довольно новое для этого, поэтому заранее спасибо:)

Вот изображение

Answer 1

Для тех, кто сталкивается с той же проблемой, я только что решил свою проблему.

Я только что изменил 'height: 100vh' на 'min-height: 100vh', и, похоже, он сделал свою работу!

Answer 2

Я скопировал и вставил твой код, чтобы проверить его.С кодом, который вы дали, ваше изображение покрывает все <div>, без неловко выглядящего пробела между <div>.

Когда я вхожу в адаптивный режим дизайна браузера Firefox, который я использую (правый щелчок на экране -> осмотреть элемент -> перейти к верхней правой кнопке всплывающего окна или ctrl + shift + M в окнах) ... Когда я устанавливаю высоту 800px в ширину на 450pxчем выше, тем шире вы делаете изображение начинает увеличиваться по длине, как вы хотели.

Причина этого в том, что у вас есть background-size: cover;, который изменяет размер фонового изображения, чтобы покрыть весь контейнер, , даже если ему нужно растянуть изображение или немного срезать один из краев.

У меня есть экран 1920x1080 px, и это то же самоеПринцип также происходит вне режима адаптивного дизайна, хотя высота увеличивается незадолго до максимальной ширины моего экрана.Помимо этого небольшого окна расширения, изображение остается неизменным до тех пор, пока окно моего браузера не станет настолько тонким, насколько это возможно, что опять-таки составляет около 250 пикселей из-за background-size: cover;.Большая часть изображения тоже обрезана.Вы можете прочитать больше об этом свойстве здесь.

Кроме того, что я сказал выше, если ваше изображение не увеличивается в высоте, как я уже говорил, ваша проблемазатем, скорее всего, из какого-то другого унаследованного класса css, который вам нужно показать, чтобы помочь отладить его. Так что проверьте классы css внутри любых содержащих элементов, в которых находится ваш тег <section>.

ДРУГОЙ СОВЕТ: Вы дали только 1 изображение здесь, но ваши слова звучат так, как будто у вас их много.Поскольку ваш .about класс position: fixed;, то будет отображаться только это изображение.Если вы хотите, чтобы другие изображения отображались в их собственных <div> с таким же фиксированным положением, вам нужно скопировать / вставить исходный класс, но слегка изменить имя и путь к изображению к новому изображению.