Responsive image, does not resize correctly

<div class="cover">
    <div class="cover-image" style="background-image : url('http://4.bp.blogspot.com/-AycDlsjqzZg/TwNAOJgtvWI/AAAAAAAAAsU/7J9HDoXhHLs/s1600/bouken-ni+logo+01.png')"></div>
</div>

And I have my CSS class to resize:

.cover {
 padding: 30px 15px;
 margin-bottom: 30px;
 color: inherit;
 background-color: #eeeeee;
 margin-bottom: 0px !important;
 padding: 0px 0px;
 background-color: transparent;
 display: -webkit-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
-webkit-align-items: center;
 align-items: center;
 overflow: hidden;
 position: relative;
 height: 70%;
}
.cover .cover-image {    
z-index: -1;
position: absolute;
top: 0px;
width: 100%;
min-height: 30%;
height: 100%;
background-size: cover;
background-position: center;

}