title: How can I place text on a resizing image that also resizes?
body: <p>I want to make the
  .overlay div float on top of the "img/5.jpg". But I want the image to
   still resize and to stay at the top. As well as the banner at the top
  staying the same. Thank you! An example of this idea can be found at <a href="http://thedreamcatchers.co.uk" rel="nofollow">http://thedreamcatchers.co.uk</a>. I'd rather use just text with no background, I placed the text inside a div (.overlay) because it seemed like that would be easier to work with.</p>
  
  <p>EDIT: I don't think I was being clear enough I want to effectively float .overlay on top of the image inside #maincontent1</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@charset "utf-8";
  /* CSS Document */
  html, body {
      margin: 0;
      padding: 0;
  overflow-x: hidden;
  }
  
  #wrapper{
   height: auto;
      width: 100%%;
     
  }
  .overlay {
   width:53%;
   padding:2% 2% 3%;
   background-color: green;
   background-repeat:repeat;
   text-align:left;
   z-index:1;
  }
  #maincontent1 h1{
   
    z-index:100;
      position:static;    
      color:white;
   
  }
  
  #maincontent1 img{
  width: 100%;
    position:static;
    top: 0;
    left: 0;
    z-index:-1;
  }
  
  #maincontent2 {
       
        clear: both;
  
  }
  #maincontent3 {
  clear:both;
   font-family: 'Raleway', sans-serif;
   margin-left: 20%;
   margin-right: 20%;
         clear: both;
  
  }
  #maincontent4 {
  
    width:100%;
        clear: both;
  
  }
  #maincontent5 {
  clear:both;
  background-image: url(../img/3.jpeg);
  padding-top: 10%;
  padding-bottom: 10%;
  
  }
  .maincontent5_text{
   clear:both;
   font-family: 'Raleway', sans-serif;
   margin-left: 12%;
   margin-right: 12%;
  background-color:#FFF;
         clear: both;
     border-color:#FFF; 
     border-style: solid; border-width: 10px;
     
    }
   .maincontent5_text h1{
     display:inline;
     font-family: 'Raleway', sans-serif; font-size: 30px; 
     text-align: right; 
     color: #F39C9C; 
     font-weight: 400; 
     padding-left: 5px;
    }
  #topbar { 
     margin-bottom: 0; 
     padding: 3px 0 3px 0; 
     background: #F39C9C; 
     width: 100%; 
     text-align: right; 
     color:white;
  } 
  
  #topbar ul { 
     list-style: none; 
     margin: 0; 
     padding: 0; 
  } 
  
  #topbar ul li { 
     margin: 0; 
     padding: 0; 
     display: inline; 
  } </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
  &lt;div id="wrapper"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;link href="css/style.css" type="text/css" rel="stylesheet" /&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' type='text/css'&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Raleway:400,300' rel='stylesheet' type='text/css'&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="topbar"&gt;
  &lt;ul&gt; 
    &lt;li&gt;&lt;a href="#"&gt;LOGO&lt;/a&gt;&lt;/li&gt; 
    &lt;li&gt;Email&lt;/li&gt; 
    &lt;li&gt;Telephone&lt;/li&gt; 
  &lt;/ul&gt;   
  &lt;/div&gt;
  &lt;div id="maincontent1"&gt;
     &lt;img src="http://placehold.it/1920x1080"/&gt;
     &lt;div class="overlay"&gt;
          
          
                  
              
                  &lt;h1&gt;Some Text Here&lt;/h1&gt;
          
          
           &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;style&gt;
  .menu1 p {
   text-align: center;
   font-family: 'Comfortaa', cursive;
   font-size: 20px;
  }
  &lt;/style&gt;
  
  &lt;div id="maincontent2"&gt;
  &lt;table width="100%" height="10%" border="0"  class="menu1"&gt;
    &lt;tr&gt;
  
      &lt;td onMouseOver="this.bgColor='#F39C9C',this.style.color='white'" onMouseOut="this.bgColor='white',this.style.color='#F39C9C'" bgColor="white" color="#F39C9C" width="25%"&gt;&lt;p&gt;&lt;a&gt;Home&lt;/a&gt;&lt;/p&gt;&lt;/td&gt;
     &lt;td onMouseOver="this.bgColor='#F39C9C',this.style.color='white'" onMouseOut="this.bgColor='white',this.style.color='#F39C9C'" bgColor="white" color="#F39C9C" width="25%"&gt;&lt;p&gt;&lt;a&gt;About&lt;/a&gt;&lt;/p&gt;&lt;/td&gt;
      &lt;td onMouseOver="this.bgColor='#F39C9C',this.style.color='white'" onMouseOut="this.bgColor='white',this.style.color='#F39C9C'" bgColor="white" color="#F39C9C" width="25%"&gt;&lt;p&gt;&lt;a&gt;Portfolio&lt;/a&gt;&lt;/p&gt;&lt;/td&gt;
   &lt;td onMouseOver="this.bgColor='#F39C9C',this.style.color='white'" onMouseOut="this.bgColor='white',this.style.color='#F39C9C'" bgColor="white" color="#F39C9C" width="25%"&gt;&lt;p&gt;&lt;a&gt;Contact&lt;/a&gt;&lt;/p&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;&lt;hr width="100%" color="#F39C9C"&gt;
  &lt;/div&gt;
  
  &lt;div id="maincontent3"&gt;
  
    &lt;h1 style="font-family: 'Raleway', sans-serif; font-size: 36px; text-align:center; color:#F39C9C; font-weight:400;"&gt; "They were extremely good at responding to feedback and worked incredibly hard."&lt;/h1&gt;
     
    &lt;p style="text-align:center; color:#A6A6A6;"&gt; Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. &lt;/p&gt;
  
  &lt;/div&gt;
  
  &lt;div id="maincontent4"&gt;
  &lt;iframe src="http://youtube.com/embed/2YBtspm8j8M?controls=0&amp;disablekb=1&amp;enablejsapi=1&amp;iv_load_policy=3&amp;rel=0&amp;showinfo=0" width="100%" height="500px" frameborder="0" allowfullscreen=""&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  
  
  
  
  &lt;div id="maincontent5" &gt;
   &lt;div class="maincontent5_text"&gt;
      &lt;img src="http://placehold.it/200x200" style="display:inline; float: left;"&gt;
    &lt;h1 style=""&gt; "They were extremely good at responding to feedback and worked incredibly hard."&lt;/h1&gt;
     
    &lt;p style="text-align:center; color:#A6A6A6;"&gt; Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. &lt;/p&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  
  
  
  
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>