Div with background image inside div doesn't work properly - html

Question

I have a div with background image put inside another div, instead of fit width parent div, it fit full screen. Please take a look my code to know clearly, sorry for bad english.
http://codepen.io/thehung1724/full/jEEgQq/
HTML
<div id="video-section" class="dark-section">
<div class="home"></div>
<div class="fullscreen-img" style="background-image: url(http://upanh.biz/images/2014/11/23/bg1.jpg)"></div>
</div>
CSS
*{
margin: 0;
padding: 0;
}
#video-section{
margin: 0 auto;
width: 1230px;
height: 500px;
}
.dark-section{
background-color: black;
}
.home{
display: table;
height: 500px;
left: 0;
position: relative;
top: 0;
width: 100%;
}
.fullscreen-img {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: auto;
left: 0;
min-height: 500px;
position: fixed;
top: 0;
width: 100%;
z-index: -1;
}
Thank in advance.

Answer 1

The .home div needs to be absolutely positioned in order not to "push" the background div downwards. The background div shouldn't have the fullscreen-img class, since most of those rules should be removed. It only needs height: 100% because divs have width: 100% by default since they're block elements. Of course, move the inline styles into a class or ID rules, I left them there just to show you.
That's all you need basically:
remove the .fullscreen-img class from the background div
set its height to 100% instead
make the .home div absolutely positioned
See it here: http://codepen.io/anon/pen/azzexY
*{
margin: 0;
padding: 0;
}
body {
background-color: black;
}
#video-section{
margin: 0 auto;
width: 1230px;
height: 500px;
}
.dark-section{
background-color: black;
}
.home{
display: table;
height: 500px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
<div id="video-section" class="dark-section">
<div class="home"></div>
<div class="" style="height: 100%; background-image: url(http://upanh.biz/images/2014/11/23/bg1.jpg)"></div>
</div>
UPDATE
Fixes/changes for your website for the problematic element (<div style="background-image: url('images/bg2.jpg');" class="fullscreen-img img-after"></div>):
left: initial;
width: 1230px;