How do I prevent my background image from shrinking?

I have a background image for my bootstrap row. When I resize (make smaller) the browser window, the image shrinks with it.

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.

I have the following CSS:

.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 */
}

and following HTML:

<div class="row my-bootstrap-row">
   blah blah
</div>

What am I missing here?