1

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>
AliNajafZadeh
  • 1,216
  • 2
  • 13
  • 22
Melissa Couturier
  • 11
  • 2
  • 1
    Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) – Paulie_D Sep 09 '22 at 12:48
  • 1
    Have you tried without the minimum height? Images might be just too big? – Salketer Sep 09 '22 at 12:58

1 Answers1

1

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

Sara Kay
  • 53
  • 6