How to center a background image as the screen is resized?

I am working with Bootstrap a web one page, which I work images type background-image within a div of size 12 ( col-lg-12 ) said div has a high of 640px which covers me all the screen my background bg1.png ( link )

HTML:

<div class="container-fluid">
    <!-- Seccion 1 -->
    <div class="row">
        <div class="col-lg-12" id="S1"></div>
    </div>
    <!-- Seccion 2 -->
    <div class="row">
        <div class="col-lg-12" id="S2"></div>
    </div>
</div>

CSS:

#S1{
        background: url(bg1.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 1204px;
    }
 #S2{
        background: url(bg2.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 1204px;
    }

What is seen as I wish from a browser, but seeing it from a phone I would like to move the astronaut from the image to the medium, so that as I re-dimensioning the image, the astronaut will be left more and more in the middle of the screen always.