How to make my background image not going out its div - html

Question

I'm new. I've created a <div> inside a <section> and in this <div> I've added two background images using Gridlex. For some reasons, both photo go out of the container. I'd like to do something so both pictures don't go out of the container and take all the space of their Gridlex block.
Anyone, would know what I can do to fix this?
Here the photo:
enter image description here
Here the CSS I've wrote for both images:
.bg-about1 {
background-image: url('../images/about1.jpg') ;
background-size: cover;
background-repeat: no-repeat;
min-height: 500px;
}
.bg-about2 {
background-image: url('../images/about2.jpg') ;
background-size: cover;
background-repeat: no-repeat;
min-height: 500px;
}
<section class="light-bg section-about">
<div class="grid">
<div class="col-5_sm12-middle">
<h2 class="padded-7p center uppercase p-white">Title.</h2>
</div>
<div class="col-7_sm12-middle bg-about1">
<!-- <img class="img100" src="./images/about1.jpg" alt="Art design"> -->
</div>
<div class="col-5_sm12-middle bg-about2">
<!-- <img class="img100" src="./images/about2.jpg" alt="photo"> -->
</div>
<div class="col-7_sm12-middle">
<p class="padded-2 p-white"> my text.</p>
</div>
</div>
</section>

Answer 1

maybe try instead of
background-size: cover;
writing:
background-size: contain;