fit background header image

I have image in header section but not the whole image is showing on full screen. See below images please: Full browser windows screen: The image gets fit without any cut if I resize the window to lower like this: Image on resizing window size smaller I want the image to fit in full screen without any cut like it gets when we smaller the browser window size. Thanks!! Code: <!-- Header Section START--> <div class="header"> <div class="row"> <div class="col-md-5"> <h2 style="padding-left:10px;color:white;">Online Video Gallery <span class="glyphicon glyphicon-film fa-lg" style="color:black;"></span></h2> </div> <div class="col-md-offset-4 col-sm-3"> <p style="margin-top:20px;"> <input type="text" name="search_box" placeholder="Search here">&nbsp;<input type="submit" name="search_btn" value="Search"></p> </div> </div> </div> <!-- Header END--> CSS .header class code: .header { width:100%; height:100%; background-image: url(/image/header.jpg); background-size: cover; border-radius:4px; }