position text on image correctly {CSS HTML} - html

Question

[How to position text on the image correctly? i got three blocks of text which i want to position them on the same line on the image but i struggle with it :(
#banner {
justify-content: center;
height: 600px;
margin-top: 100px;
margin-left: 10%; }
.banner-text {
color: white;
justify-content: center;
justify-content: space-around;
text-align: center;
display: inline-block;
position: absolute;
flex-direction: column; }
/*DownTown*/
.flex-text {
background-color: grey;
text-align: center;
}
html
<div id="banner"><img src="2525.jpeg">
<div class="banner-text">
<div class="flex-text text1">
<h1><b>DownTown</b> 384 West 4th St Suite 108</h1>
<div class="flex-text text2">
<h1><b>East Bayside</b> 3433 Phisherman Avenue </h1>
<div class="flex-text text3">
<h1><b>Oakdale</b> 515 Crecent avenue Second Floor </h1>
</div>
</div>
</div>
</div>
</div>
here is how it should look
]2
and that's how i did it -_-

Answer 1

Your html markup is not correct and instead of adding image as an img element in the #banner, add the image as a background image using css. That way, you don't need position absolute to place text over the image. After that, use flexbox for aligning the elements.
#banner {
background-image: url(https://picsum.photos/500);
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.banner-text {
color: white;
justify-content: space-around;
display: flex;
width: 100%;
flex-wrap: wrap;
}
.flex-text {
background-color: #222;
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-between;
height: 180px;
padding: 20px;
width: 200px;
margin: 5px;
}
h1 {
margin: 0;
}
<div id="banner">
<div class="banner-text">
<div class="flex-text text1">
<h1>DownTown</h1>
<span>384 West 4th St</span>
<span>Suite 108</span>
<span>Portland, Maine</span>
</div>
<div class="flex-text text1">
<h1>DownTown</h1>
<span>384 West 4th St</span>
<span>Suite 108</span>
<span>Portland, Maine</span>
</div>
<div class="flex-text text1">
<h1>DownTown</h1>
<span>384 West 4th St</span>
<span>Suite 108</span>
<span>Portland, Maine</span>
</div>
</div>
</div>

Answer 2

Your markup is not right. So I changed it a bit. And I also changed the css accordingly and use flex for aliigning items. And instead of using img in html I use background property.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 1200px;
height: 100vh;
margin: auto;
overflow: hidden;
padding: 1rem;
background: #333;
}
#banner {
margin-top: 100px;
}
.banner-text {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: white;
}
/*DownTown*/
.flex-text {
background-color: rgba(0, 0, 0, 0.384);
line-height: 4rem;
padding: 4rem;
margin: 0rem 2rem;
text-align: center;
}
<div class="container">
<div id="banner">
<!-- <img src="2525.jpeg" /> -->
<div class="banner-text">
<div class="flex-text text1">
<h1>DownTown</h1>
<p>384 West 4th St</p>
<p>Suite 108</p>
</div>
<div class="flex-text text2">
<h1>East Bayside</h1>
<p>3433 Phisherman Avenue</p>
<p>(Norway Corner)</p>
</div>
<div class="flex-text text3">
<h1>Oakdale</h1>
<p>
515 Crecent avenue
</p>
<p>
Second Floor
</p>
</div>
</div>
</div>
</div>

Answer 3

The issue you have is the root diff i.e #banner has two child. The properties on #banner doesn't indicate in any way that the two items should overlap. You are trying to achieve that through position:absolute. Which is also an approach. But here's how you can achieve what you want in two ways:
Put that image as the background property for #banner and provide the flexbox properties to banner.
body {
margin: 0;
max-width: 100%;
}
#banner {
position: relative;
height: 600px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#banner img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1;
}
.banner-text {
position: relative;
width: 100%;
z-index: 2;
display: flex;
justify-content: space-around;
}
.flex-text {
background: #efefef;
}
h1 {
font-size: 17px;
}
<div id="banner">
<img src="https://cdn.slashgear.com/wp-content/uploads/2019/07/coffee_main_envat-1280x720.jpg">
<div class="banner-text">
<div class="flex-text text1">
<h1><b>DownTown</b><br/> 384 West 4th St Suite 108</h1>
</div>
<div class="flex-text text2">
<h1><b>East Bayside</b><br/> 3433 Phisherman Avenue </h1>
</div>
<div class="flex-text text3">
<h1><b>Oakdale</b><br/> 515 Crecent avenue Second Floor </h1>
</div>
</div>
</div>
Position your banner div relative. Then position your image as absolute so that it occupies whole width and banner-text should have relative positioning. One other thing you need to do if the text doesn't come to center is provide 100% width to the banner-text.
Hope this solves the problem