title: How do I prevent my background image from shrinking?
body: <p>I have a background image for my bootstrap row. When I resize (make smaller) the browser window, the image shrinks with it.  </p>
  
  <p>I am trying to make it so that the image stays in place centered and does not shrink.  So as I am making the browser smaller, the image should stay centered in the page and its edges basically become invisible.  </p>
  
  <p>I have the following CSS:</p>
  
  <pre><code>.my-bootstrap-row {
      background-image: url(foo.jpg); 
      background-position:fixed; 
      background-size: 100% 100%; 
      background-repeat: no-repeat; 
      height:700px;  /* image height is also 700px */
  }
  </code></pre>
  
  <p>and following HTML:</p>
  
  <pre><code>&lt;div class="row my-bootstrap-row"&gt;
     blah blah
  &lt;/div&gt;
  </code></pre>
  
  <p>What am I missing here?</p>