Div與背景圖像裏面div不能正常工作

Question

我有一個背景圖像div放在另一個div裏，而不是適合寬度父div，它適合全屏幕。請看看我的代碼清楚地知道，對不起英文不好。

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; 
} 

預先感謝。

Answer 1

.home div需要絕對定位，以免向下「推」背景div。背景div不應該有fullscreen-img類，因爲大多數這些規則應該被刪除。它只需要height: 100%，因爲divs默認爲width: 100%，因爲它們是塊元素。當然，將內聯樣式移動到類或ID規則中，我只是爲了向您展示它們。

這就是你所需要的基本：

• 從背景DIV
• 設置其高度爲100％去除.fullscreen-img類，而不是
• 使.home DIV絕對定位

---

請看這裏：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> 
 
\t <div class="" style="height: 100%; background-image: url(http://upanh.biz/images/2014/11/23/bg1.jpg)"></div> 
 
</div>

---

UPDATE

修復/爲您的網站修改有問題的元件（<div style="background-image: url('images/bg2.jpg');" class="fullscreen-img img-after"></div>）：

• 左family：宋體;
• width：1230px;