How do I add all the texts and buttons to display on the background img not below it? Using Bootstrap 5.

<div class="container-fluid">
   <div class="row landingPageBack img-responsive">
    <img src="img/Landing.jpg" alt="">
     <div class="text-center">
        <h1>WELCOME</h1>
        <h2>write me a msg</h2>
        <a href="#" class="btn btn-primary btn-lg text-center">CONTACT ME</a>  
     </div>
  </div>
</div>

CUSTOM CSS

/* BG IMAGE*/
body html {
    margin: 0;
    padding: 0;
}

.landingPageBack {
    background-image: url('img/Landing.jpg');
    min-height : 100%;
    min-width : 100%;
    background-size: 100% 100%;
    background-repeat:no-repeat;
    overflow-y: hidden;
    overflow-x: hidden;
    }

CodePudding user response：

/* BG IMAGE*/
.landingPageBack {
    background-image: url('https://images.unsplash.com/photo-1637593755675-c38c18661a86?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1935&q=80');
    background-size: cover;
    background-repeat: no-repeat;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section class="landingPageBack">
  <div class="vh-100 vw-100 d-flex justify-content-center align-items-center">
     <div class="text-center text-white">
        <h1>WELCOME</h1>
        <h2>write me a msg</h2>
        <a href="#" class="btn btn-primary btn-lg mt-3">CONTACT ME</a>  
      </div>
  </div>
</section>
<!-- begin snippet: js hide: false console: true babel: false -->

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Please check the code, Hope it will help you.

Here are some links you should go through:

1. https://getbootstrap.com/docs/5.1/utilities/flex/
2. https://getbootstrap.com/docs/5.1/utilities/sizing/#relative-to-the-viewport

CodePudding user response：

Make the wrapped container div position: relative. Then you can place the image inside and a text Block element. The text-blockelöement must be position: absolute. With the css attribute top and left, bottom, right you can position the text on the image.

/* Container holding the image and the text */
.container {
  position: relative;
  text-align: center;
  color: red;
  font-size: 5rem;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 <div class="container">
  <img src="https://via.placeholder.com/500/green" alt="Snow" style="width:100%;">
  <div class="centered">Centered</div>
</div> 

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

And for your example, you would only have to adjust your two classes a bit.

/* BG IMAGE*/
body html {
    margin: 0;
    padding: 0;
}
.landingPageBack {
  position: relative; 
}
.text-center {
  position: absolute;
  top: 50%;
  left: 40%
}
.landingPageBack {
    background-image: url('https://via.placeholder.com/500/green');
  background-repeat: no-repeat;
  background-size: 100%;  
}

<div class="container-fluid">
   <div class="row landingPageBack img-responsive">
    <img src="https://via.placeholder.com/500/green" alt="">
     <div class="text-center">
        <h1>WELCOME</h1>
        <h2>write me a msg</h2>
        <a href="#" class="btn btn-primary btn-lg text-center">CONTACT ME</a>  
     </div>
  </div>
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>