Fixing an image to a fullscreen div - html

Question

my question is simple.
I have this page: http://vacanor.com/tests/lared
There is that image in the middle of the first section that floats on the screen. I want to stick that image in the first section preservating its position whenever I change the screen size. I've tryed everything but I can't.
Here is a video about what is bothering me: https://www.youtube.com/watch?v=U37_1cY8nAs
My html(including second section):
<div class="container-a">
<!--<div class="col-lg-12">-->
<div class="img-cover">
<center><img class="img-cover-i floating" src="img/logo-background.png" alt="Logo">
</center>
</div>
</div>
<!--</div>-->
<!-- Presentación -->
<div class="container-b">
<!-- <div class="col-lg-12">-->
<div class="ani">
<div class="intro">
<h1 class="animated fadeInDown animated-d-1 cd-headline slide">
Bienvenido a La Red
<small>
<span class="text-primary cd-words-wrapper" style="width: 207px;">
<b class="is-hidden">Construir </b>
<b class="is-hidden">Jugar</b>
<b class="is-hidden">Sobrevivir</b>
<b class="is-visible">Divertir-se </b>
</span>
<span>nunca será lo mismo.</span>
</small>
</h1>
</div>
</div>
</div>
And my css:
.img-cover {
margin: 0 auto;
width: 95%;
position: relative;
z-index: 10;
margin-top: 50px;
}
.img-cover-i {
position: relative;
}
.container-a {
margin: 0 auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: -2;
background-image: url('../img/cover-background.jpg');
background-position: center;
background-repeat: none;
background-size: cover;
}
.container-b {
margin: 0 auto;
position: absolute;
width: 100%;
height: 100%;
z-index: -3;
top:100%;
}

Answer 1

I did not really understand your question, so here are 3 fixes to how I understood it.
.container-a {
margin: 0 auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: -2;
background-image: url('../img/cover-background.jpg');
background-position: center;
background-repeat: none;
background-size: cover;
overflow:hidden;
}
The above code should make your image not get out of the div when resizing the screen, and below is an example of how to resize the image accordingly;
.img-cover-i {
position: relative;
height:calc(100% - 50px)
}
Also, if you want your Logo to follow the screen but not be visible outside the container a, use this code:
.img-cover-i {
margin-left:calc(50% - 237px);
position: fixed;
}
.container-a {
margin: 0 auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: -2;
background-image: url('../img/cover-background.jpg');
background-position: center;
background-repeat: none;
background-size: cover;
overflow:hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
Also, if using this code, remove the that wraps the img in the html part.
I hope this helped.