div中包含背景图片的div无法正常工作

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;