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

Html – Bootstrap 5 Image and text on it

I have Bootstrap 5 website template and I need to add text with white background on the center image.

And in this case, I see a white color instead image but I want to white rectangle with a title and text in the center of the image

.our-company-title {
  line-height: 31px;
  letter-spacing: 0;
  color: #000;
  font-size: 25px;
}

.our-company-text {
  color: #787878;
  line-height: 150%;
  font-size: 18px;
  letter-spacing: 0;
}

.contact-image-box {
  position: absolute;
  background-color: #fff;
  text-align: center;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div class="container-fluid overflow-hidden">
  <div class="row">
    <div class="col-12 col-md-6 p-0 position-relative">
      <div class="position-relative">
        <img class="img-fluid w-100 h-100 object-fit-cover" src="https://via.placeholder.com/300x100" alt="">

        <div class="contact-image-box">
          <h3 class="our-company-title">Title</h3>
          <p class="our-company-text">Company text</p>
        </div>
      </div>
    </div>

    <div class="col-12 col-md-6 align-self-md-center">
      content here
    </div>
  </div>
</div>

Also I tried this, but title and text align left but not center:

.contact-image-box {
    max-width: 400px;
}
Tags:

3

Answers


  1. 0

    my suggestion is to use inner div inside that contact-image-box. this div should contain that text and stuff, .contact-image-box div on the other hand, should be a container. give those flexbox properties to that container div, then add that white background color to the inner div.

    it should be something like this:

    .contact-image-box { 
  inset: 0; // this is equivalent to the top, bottom, left and right set to 0
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
        
   & > div {
     background-color: white;
   }

}
    Login or Signup to reply.
  2. 0

    You want to add the background-color to the h3 and p like this:

    .our-company-title{
    line-height: 31px;
    letter-spacing: 0;
    color: #000;
    font-size: 25px;
    background-color:#fff;
}

.our-company-text{
    color: #787878;
    line-height: 150%;
    font-size: 18px;
    letter-spacing: 0;
    background-color: #fff;
}
img {
  width: 100%;
  height: 100%;
}
.contact-image-box {
    position: absolute;
    text-align: center;
    /* background-color:#fff; */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
    <div class="container-fluid overflow-hidden">
    <div class="row">
        <div class="col-12 col-md-6 p-0 position-relative">
            <div class="position-relative">
                <img class="img-fluid w-100 h-100 object-fit-cover" loading="lazy" src="https://plus.unsplash.com/premium_photo-1700268374954-f06052915608" alt="">
                <div class="contact-image-box">
                    <h3 class="our-company-title">Title</h3>
                    <p class="our-company-text">Company text</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 align-self-md-center">
        content here
        </div>
    </div>
</div>
    Login or Signup to reply.
  3. 0

    Do you mean something like this? In that case, you should utilize z-index as you are positioning .contact-image-box as absolute, which takes the whole viewport. Proper stacking will solve the issue.

    .our-company-title {
  line-height: 31px;
  letter-spacing: 0;
  color: #000;
  font-size: 25px;
  z-index: 4;
}

.our-company-text {
  color: black;
  line-height: 150%;
  font-size: 18px;
  letter-spacing: 0;
  z-index: 4;
}

.contact-image-box {
  position: absolute;
  background-color: #fff;
  text-align: center;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.imgg {
  width: 60%;
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: .6;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>
<div class="container-fluid overflow-hidden">
  <div class="row">
    <div class="col-12 col-md-6 p-0 position-relative">
      <div class="position-relative">
        <img class="img-fluid w-100 h-100 object-fit-cover imgg" loading="lazy" src="https://www.w3schools.com/html/pic_trulli.jpg" alt="">
        <div class="contact-image-box">
          <h3 class="our-company-title">Title</h3>
          <p class="our-company-text">Company text</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-6 align-self-md-center">
      content here
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search