Scaling BG image on small screen

I'm using a standard bootstrap template and have a full background (1900x1250) on the top header section. When scaling the browser or viewing it on a mobile it appears to clip the image instead of scaling it. Is there any way to fix this?

          <nav class="navbar navbar-default navbar-fixed-top">
                 <div class="container"><!--continues--> 
                 <div class="navbar-header page-scroll">
                     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                     </button>
                 </div>


        header {
            height: 100vh;
            background-image: url(../img/header-bg3.jpg);
            background-repeat: none;
            background-attachment: scroll;
            background-position: center center;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            overflow: hidden;
        }