Always show image regardless of desktop browser dimensions - html

Question

For the below image I need to always show the whole background image regardless of the desktop window size and always ensure that the text layout remains the same, ie, the button is always sitting at the bottom of the section and not have a big blue gap below it.
*Note my image is just an example, the white rectangle is really a picture of a product but I have removed it because I cannot release such photos.
How best can I achieve this? This modern web design of maintaining the same look across different desktop browser screens is really troubling me because the methods I have used mean the design is not consistent across different browser screens, ie, the white rectangle gets clipped at the bottom or the text content height is too small for the blue section height and we get a big blue gap below it.
My techniques I have tried:
Use a bootstrap 3.3 row (the website uses this version of the library no choice in this) with 2 columns with the dimensions 3/12 and 9/12. This works but sometimes I get a big blue gap under the text content (button) when I would really like it to spread out vertically evenly.
Make the section have a CSS background image. Set the image to 'cover'. This results in clipping of the bottom of the white rectangle in certain desktop window dimensions.
Any advice on how best to approach this design using CSS3, Bootstrap 3.3 or etc.?
.blue-section {
background-color: #1caaf2;
color: #fff;
padding-top: 10px;
padding-bottom: 10px;
}
.blue-section h1,
.blue-section h2,
.blue-section h3,
.blue-section h4,
.blue-section h5,
.blue-section p {
color: #fff;
}
.blue-bk {
background: url('https://i.stack.imgur.com/Sgm8G.png') !important;
-webkit-background-size: contain !important;
-moz-background-size: contain !important;
-o-background-size: contain !important;
background-size: 100% !important;
background-repeat: no-repeat !important;
width: 100%;
}
.banner-img {
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<section class="section-container blue-section">
<div class="container">
<div class="row">
<div class="col-xs-3">
<img class="img-responsive banner-img" src="https://i.stack.imgur.com/Sgm8G.png" />
</div>
<div class="col-xs-9 mht-db-header-information">
<h1 class=""><strong>Lorem ipsum Lorem ipsum Lorem ipsum </strong></h1>
<h3>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</h3>
<div class="text-center">
<a class="button-primary" href="">Button</a>
</div>
</div>
</div>
</div>
</section>
<section class="section-container blue-section blue-bk">
<div class="container">
<div class="row">
<div class="col-xs-3">
</div>
<div class="col-xs-9 mht-db-header-information">
<h1 class=""><strong>Lorem ipsum Lorem ipsum Lorem ipsum </strong></h1>
<h3>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</h3>
<div class="text-center">
<a class="button-primary" href="">Button</a>
</div>
</div>
</div>
</div>
</section>
All images:
White rectangle only (in production will be an image of a product):
Background image I use: