Why aren't my background images expanding lengthwise - html

Question

so I've seen answers to this question but they don't seem to work on my site.
Why do my background images not cover the whole div? As I decrease the screen width the elements are getting longer but the section background stays the same.
Apologies for quite a lot code coming up but I thought it best to show the whole picture.
Thanks in advance for any help.
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">
¡Pide tu presupuesto!
</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;
}
Pretty new to this so thanks in advance :)
Here is the image

Answer 1

I copied and pasted your code to test it. With the code you gave, your image covers the entire <div>, with no awkward looking blank space between the <div>.
When I go into the responsive design mode of the firefox browser I'm using (right click screen -> inspect element -> go to the top right button of the window that pops up, or ctrl+shift+M on windows)... When I set the height to 800px wide by 450px high, the wider you make it, the image starts expanding length wise as you wanted.
The reason for this is because you have background-size: cover;, which resizes the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
I have a 1920x1080 px screen, and this same principle happens outside of responsive design mode too, though the height expands shortly before the max width of my screen. Besides that small window of expansion, the image stays the same size all the way until my browser window is as skinny as it can get, which is around 250px, again, because of background-size: cover;. A lot of the image is cut off too. You can read more about that property here.
Other than what I said above, if your image is not expanding in height as I said it did, your problem then is most likely from some other inherited css class, which you need to show to help debug it. So check the css classes inside any containing elements that your <section> tag is in.
ANOTHER TIP: You only gave 1 image here, but your words sound like you have many. Because your .about class is position: fixed;, then only that image will show up. If you want any other images to show up in their own <div>'s with the same fixed positioning, you'll need to copy/paste the original class, but change the name slightly, and the image path to a new image.

Answer 2

For anyone facing the same issue I've just solved my problem.
I just changed 'height: 100vh' to 'min-height: 100vh' and it seems to have done the job!