How do I get text on to my background img - css

Question

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>
CONTACT ME
</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;
}

Answer 1

/* 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/bootstrap#5.1.3/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>
CONTACT ME
</div>
</div>
</section>
<!-- begin snippet: js hide: false console: true babel: false -->
Please check the code, Hope it will help you.
Here are some links you should go through:
https://getbootstrap.com/docs/5.1/utilities/flex/
https://getbootstrap.com/docs/5.1/utilities/sizing/#relative-to-the-viewport

Answer 2

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>
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>
CONTACT ME
</div>
</div>
</div>