title: Alignment of long text on image
body: <p>I have a image and long text which should be properly aligned on image. I gave id to image and text then in CSS for text I use position-absolute, top and left. Everything was proper but when I restore browser the text doesn't stay on its original position.When I used other positions for text it doesn't come on Image. </p>
  
  <pre><code>&lt;img id="homeimg" src="images/1.jpg" alt="img" width="1280"&gt;
  
  
                      &lt;p id="text"&gt;
                              In 2050, we are projected to have 9 billion on this planet. These people will eat and drink just like we do..
                          requiring a doubling of food production. But food and water security already are the largest challenges for a
  
                                             thriving global population...and long text
  
                          &lt;/p&gt;
  </code></pre>
  
  <p>Css coding is</p>
  
  <pre><code>#text {
      position: relative;
      text-align: center;
      width: 45em;
      word-wrap: break-word;
      font-size: 25px;
      left: 150px;
      top: 600px;
      font-family: "Trebuchet MS";
      z-index: 100;
  }
  #homeimg{
      width:100%
  }
  </code></pre>