CODEWITHSUNDEEP
htmlcss
SapirFrontEnd
SapirFrontEnd

Reputation: 45

position text on image correctly {CSS HTML}

[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 -_- enter image description here

Upvotes: 1

Views: 71

Answers (3)

Shiva Pandey
Shiva Pandey

Reputation: 655

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:

  1. 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>

  1. 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

Upvotes: 0

Himanshu Bisht
Himanshu Bisht

Reputation: 11

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>

Upvotes: 0

Yousaf
Yousaf

Reputation: 29282

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>

Upvotes: 1

Related Questions