How to make a background in a container and put the text in the middle of the photo? HTML/ CSS

I am learning HTML/ CSS and JS. I am making my first website and I have a problem. How can I change the background in the container under the pictures, to my color. On the internet I only find bg-secondary etc and I need for example #82b5cf.

I also have a question, I want to put the text in the middle of the picture, now it is under the photo and I can’t do anything with it, for a test I changed the font and there is no reaction. Thank you very much for your help 🙂

main {
  .aboutus-card-title {
    font-size: 30px;
  }
}

<main>
  <section id="UAV" class="...."> //#82b5cf
    <div class="container ">
      <div class="row gx-4 ">
        <div class="col-sm ">
          <img class="uav-photo" src="img/introduction_1.jpg" alt="An orange four-engine drone hovers in the clear blue sky.">
          <p class="aboutus-card-title">Introduction</p>
        </div>
        <div class="col-sm">
          <img class="uav-photo" src="img/UAV_features_2.jpg" alt="An orange four-engine drone hovers in the clear blue sky.">
          <p class="aboutus-card-title">Elements</p>
        </div>
      </div>
    </div>
  </section>
</main>

>Solution :

For your first question, it sounds like you’re wanting a fallback color behind your image. Here’s an example how to do this from: https://css-tricks.com/css-basics-using-fallback-colors/

header {
  background-color: black;
  background-image: url(plants.jpg);
  color: white;
}

Basically you first create your fallback background-color, then overwrite it with your background-image. If the background-image doesn’t load, the background-color will stay.

For your second question about the text with the .aboutus-card-title class, you have your CSS selectors messed up. This is a good source for learning about selectors: https://css-tricks.com/how-css-selectors-work/. If you want to select that class within main your selector should look like this:

main .aboutus-card-title{
  font-size: 30px;
}

In this case, you can probably leave off main and just have this:

.aboutus-card-title{
  font-size: 30px;
}

The only reason you would want to use the main selector here is if you wanted to style the .aboutus-card-title class differently if it’s within main compared to somewhere else.