title: Background image in div getting cut off at top and bottom when page is too short
body: <p>I'm super new at CSS, so this may be really simple. I've searched a bunch for the answer to this question, but I haven't found it yet. I would like the div, containing the logo to stretch and scale depending on the page size, and I pretty much have that working, but if the page is too short, the top and bottom of the background image get cut off. Here's the site so you can see what's happening. </p>
  
  <p><a href="http://chaptertwollc.com" rel="nofollow">chaptertwollc.com</a></p>
  
  <p>And here's the relevent CSS. </p>
  
  <pre><code>.centerLogo {
      height: 50%;
      width: 50%;
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      text-align: center;
      margin-top: auto;
      margin-right: auto;
      margin-bottom: auto;
      margin-left: auto;
      visibility: visible;
      background-repeat: no-repeat;
      background-image: url(../POP%20high%20res%20logo%20ellipse%20black%20glow%20webop.png);
      background-size: 100%;
      background-position: center center;
      background-attachment: scroll;
  }
  </code></pre>
  
  <p>EDIT: I got it working. It was as simple as changing</p>
  
  <pre><code>background-size: 100%;
  </code></pre>
  
  <p>to</p>
  
  <pre><code>background-size: contain;
  </code></pre>