position text on image correctly {CSS 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 enter image description here ]2

and that's how i did it -_-

i want to position them on the same line on the same column or same row? — Yousaf
– Yousaf, Commented Jun 13, 2020 at 6:59

Yousaf · Accepted Answer · 2020-06-13 07:30:11Z

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>

thank you very very much!, i am currently learning and it's a project part of my learning path, it's very helpful so i could see my mistakes and re learn the concepts

Himanshu Bisht · Accepted Answer · 2020-06-13 07:47:37Z

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>

Shiva Pandey · Accepted Answer · 2020-06-13 07:48:30Z

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

ok so to delete div="banner-text" and keep flex-text divs and move the image as a background image to css, and re-arrange the text blocks
@SapirFrontEnd your markup was wrong. Fixed it in the snippet above.
@yousaf already gave an answer to the problem but thank you for helping :)

Collectives™ on Stack Overflow

position text on image correctly {CSS HTML}

3 Answers 3

1 Comment

Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

4 Comments

Related