title: How do I make this sprite behave how I want?
body: <p>I have the following html where my div middle contain has a background image. This is a full width image that I want to take up the whole screen and stay centered on width collapse for responsive design. I also have a header and a footer that have similar full length images that behave the same, but not I am only showing code for the middle image here:</p>
  
  <pre><code>   &lt;div id="contain"&gt;
       &lt;div id="middle_contain"&gt;
         &lt;div class="lawyer_select"&gt;
              &lt;div class="lawyer_hold"&gt;
                  &lt;img src="images/example.jpg" width="252" height="286" alt="stuff" /&gt;&lt;/div&gt;
              &lt;div class="lawyer_hold"&gt;
                  &lt;img src="images/example.jpg" width="252" height="286" alt="things" /&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt;
       &lt;/div&gt;
  </code></pre>
  
  <p>Which has the following CSS:</p>
  
  <pre><code>#middle_contain{
        background-image:url(../images/layout/main-example.jpg);
        background-position:center;
        background-size:cover;
       -moz-background-size: cover;
       -webkit-background-size: cover;
       -o-background-size: cover;
        background-size: cover;
  }
  .lawyer_hold{
      height:312px;
      width:480px;
      background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
      float:left;
      margin-top:30px;
  }
  .lawyer_hold:nth-child(2){
      float:right;
      margin-top:30px;
  }
  </code></pre>
  
  <p>Now, the situation I am running into is rather than loading the middle contain image plus a header and footer image, I want to combine them into a sprite. I am having trouble getting the code right for that though so my images stay centered etc upon collapse. I have tried the following css, which positions the image correctly on my largest screen resolution, but now when I collapse everything else breaks down. How do I properly maintain covering the background and keeping it centered while using a sprite? Is this possible or should I stick with three individual images?</p>
  
  <pre><code>#middle_contain{
      background-image:url(../images/layout/main-example.jpg);
      background-position:center;
      background-position:0px -167px;
      background-size:cover;
         -moz-background-size: cover;
         -webkit-background-size: cover;
         -o-background-size: cover;
      background-size: cover;
  }
  </code></pre>