fullsize cover is zooming - html

Question

I have a picture I have to use for a fullsize cover picture for a landingpage. The picture is 3680 * 2456px. When I set the picture in my code, the picture is zooming, which means I can see the half of the picture. Therefore I tried to resize it to 1024 * 683 px, which resultet in that my picture filled the half of the banner.
How can I make my picture fit my banner, so it is not zooming?
.fullscreen {
width:100%;
min-height:100%;
background-repeat:no-repeat;
background-position:50% 50%;
background-position:50% 50%\9 !important;
background-image:url(/img/seminar/bg.jpg);
background-size
}
.overlay {
background-color: rgba(0, 0, 0, 0.5);
position: relative;
width: 100%;
height: 100%;
display: block;
}
<div class="fullscreen landing parallax">
<div class="overlay">
<div class="container">
<div class="row">
<div class="col-md-7">
<!-- /.logo -->
<div class="logo"><img src="http://site.dk/img/site-logo-white.png" alt="logo"></div>
</div>
</div>
</div>
</div>
</div>

Answer 1

Try:
.fullscreen {
background: url(/img/seminar/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
instead of your original .fullscreen CSS.
This snippet of code can be found via CSS Tricks website.

Answer 2

This should work. Set the image height and width to 100%
<img src="http://site.dk/img/site-logo-white.png" alt="logo" style="width: 100%; height: 100%;" />
Edit: To do that in CSS try this
.fullscreen img {
width: 100%;
height: 100%;
}