title: My background image get cut off at the bottom
body: <p>My site has to be responsive and I'm supposed to build it "mobile-first".
  It's a one page site and each section is divided by an svg image.</p>
  
  <p>So far I've gotten it the width resize perfectly by using <code>background-size:cover;</code> but a small part at the bottom of the image gets cut off. I've tried adjusting the height (auto, 100%, random pixel value) but that doesn't seem to do anything :/
  Any ideas?</p>
  
  <pre><code>#breakpink{
      background-image: url(../images/break_pink.svg);
      background-repeat: no-repeat;
      background-size: cover;
      height: 100%;
      text-indent: -9999px;
  }
  </code></pre>
  
  <p>Full code:</p>
  
  <p><a href="http://jsfiddle.net/duyBE/" rel="noreferrer">http://jsfiddle.net/duyBE/</a></p>