title: Minimum margin for a centered background-image when window resizes
body: <p>I have a background image that's centered vertically and horizontally using CSS.  It looks great and is working as long as the window is large enough to display the background image.</p>
  
  <p>The problem I have occurs when the window is resized to be smaller than the bg image.  When this happens, the bg image continues to be centered, but I instead need to maintain a minimum margin around the top and left of the bg image.  The BG image is 900px x 700px, and the code I've used is:</p>
  
  <pre><code>#main_wrapper {
      background-image: url(../images/background.jpg);
      position:relative;
      width:900px;
      height:700px;
      left:50%;
      top:50%;
      margin-left:-450px;
      margin-top:-350px;
  }
  </code></pre>
  
  <p>Any solution would need to continue to center the bg image horizontally and vertically when the window is large enough to allow it, but would have a minimum margin at the top when the window is shorter than the bg image, and a minimum margin at the left when the window is narrower than the bg image.  Any help would be greatly appreciated.  Thanks.</p>