title: make image width responsive to parent div
body: <p>This is my current html (it is actually jade) set up:</p>
  
  <pre><code>.format-properly
      .guide-bg-warrior.img-responsive
  </code></pre>
  
  <p>Which could be translated into:</p>
  
  <pre><code>&lt;div class="format-properly"&gt;
      &lt;div class="guide-bg-warrior img-responsive&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <code>img-responsive</code> class is from bootstrap and this is the other part of my css:</p>
  
  <pre><code>.format-properly {
      width: 70%;
      margin: 0 auto;
      background-color: white;
      border-radius: .0em;
  }
  
  .guide-bg-warrior{
      background-image:url('images/hero_images/warriorbg.png');
  }
  </code></pre>
  
  <p>So the image is getting loaded but it is not getting scaled to the <code>format-properly</code> divs width. Do you guys have any suggestions on why this could be the case?</p>