title: Responsive Images using CSS background image
body: <p>I am trying to figure out the best way to approach creating a responsive image to fit the whole background of a div container. There is also two text boxes that have an rbga value that need to be exactly inline with certain part of the image. </p>
  
  <p>I am wondering if it would be better to do a z index and put the image in the html or keep the image in the css as a background image?</p>
  
  <p>Right now, for the rest of my images I am using JavaScript, jQuery and PHP to resize images located in the html.  I am also using media queries to adjust my page. I was trying to not do three images; but maybe that is my best option? </p>
  
  <p>Here is what I have so far. I have removed extra code to not add confusion. I also attached a jpg of what i am trying to accomplish. I can get the paragraph divs to line up; but not responsively match with the image. </p>
  
  <pre><code>&lt;section id="content" role="main" class="cf"&gt;
     &lt;div class="mission"&gt;
         &lt;h1&gt;We are What We Create&lt;/h1&gt; 
  
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero odio, 
           gravida sedconsequat a, faucibus dignissim&lt;/p&gt;
       &lt;/div&gt;
  
     &lt;/section&gt;
  
  CSS
  .mission {
    background-image:url(../images/gallery_banner.jpg);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
  }
  
  .mission p {
      color: #fff;
      text-align:center;
      text-shadow: 2px 1px 1px  #4c4341;
      background: rgba(81,118,131, .9);
      width: 100%;
      margin: 0 auto;
      margin-top: 220px;
      margin-bottom:5%;
  }
  
  .mission h1 {
      font-weight: bold;
      font-size: 120%;
      color: #fff;
      text-shadow: 2px 1px 1px  #4c4341;
      background: rgba(81,118,131, .9);
      letter-spacing:.1em;
      text-align: center;
  
  
  }
  </code></pre>
  
  <p>Link to photoshoped image of what I am trying to do:<br>
  <a href="https://docs.google.com/file/d/0B_TAmXXa2n8OUXJ2LVd0SFZwQVk/edit?usp=sharing" rel="nofollow">https://docs.google.com/file/d/0B_TAmXXa2n8OUXJ2LVd0SFZwQVk/edit?usp=sharing</a></p>