Question 45315 in Html Question posted in
Some basic documentation can be found here.

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>
Tags:

2

Answers


  1. 0

    These are two questions. I’d split them into two separate posts, makes it a bit easier to search.

    For changing the background you can use:

    background-color: #82b5cf;

    or

    background: #82b5cf;

    For the centering of text on an image, you could use a combination of position, top, left and transform:

    .centered-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search