不覆蓋整個空間的背景圖片

Question

我確定我錯過了一些簡單的東西，但我似乎無法找到它。

在michelleforboe.com，我試圖讓背景圖像覆蓋整個div的空間。我正在使用calc來設置div的高度，但是div的分辨率應該稍微高一些。另外，如果向下滾動&，圖像底部的黑色條更大。還有一個div位於圖片的頂部。我曾想過也許這是造成額外的空間，但我不認爲這是。任何人都能看到我缺少的東西？

.home-section-1 .wrap { 
    margin-left: 0; 
} 
.home .site-inner { 
    margin-top: 140px; 
} 
.home-section-1.widget-area { 
    background-size: 100% calc(100vw/2.9); 
    background-position: 50% 50%; 
    height: calc(100vw/2.9); 
    padding-top: 0; 
    padding-bottom: 0; 
} 
#text-7 { 
    height: calc(100vw/2.9); 
} 
#text-7 .widget-wrap { 
    height: 100%; 
    position: relative; 
} 
#text-7 .widget-wrap .textwidget { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 
#text-7 a.button { 
    font-size: 2vw; 
    padding: 1vw; 
} 
.home-section-1 .widget-wrap { 
    width: 50%; 
} 

Answer 1

試試這個CSS

.home-section-1.widget-area { 
background-size: cover !important; 
background-position: 50% 50%; 
height: auto; 
padding-top: 0; 
padding-bottom: 0; 
} 

如果妳想要圖像的全屏然後從CSS

刪除高度

.home-section-1.widget-area { 
background-size: cover !important; 
background-position: 50% 50%; 
padding-top: 0; 
padding-bottom: 0; 
}