着色填補區域與@media

Question

的WP設置我使用

@media (min-width: 768px) { 
    section { 
    padding: 50px 0; 
    } 
} 

幾部分之間自動填充。現在，一個部分我想添加一個背景圖像和在它前面的一個灰色的透明盒子：

section { 
    padding: 100px 0; #which does not do anything, can change it to random values. 
} 
section .background1 { 
    background-color: #222222; 
    background-image: url('../img/bg.jpg'); 
    background-repeat: no-repeat; 
    background-attachment: scroll; 
    background-position: center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
} 
section .bg-layer { 
    background-color: rgba(50,50,50, 0.6); 
    top: 0 ; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

我的HTML代碼看起來下面一些文字等內部：

<section> 
    <div class="background1"> 
    <div class="bg-layer"> 
     <div class="container"> 

這在原則上工作正常，但填充區域沒有填充背景圖像，我無法完成這項工作。所以我基本上希望圖像和灰色區域擴展到這一節的一般填充區域。任何人都可以幫助或描述最佳的解決方法嗎？ Thx一噸！

Answer 1

我想這是你想達到的。

section { 
    padding: 100px 0; 
    background-color: #dddddd; 
} 
section h2.section-heading { 
    text-transform: none; 
    font-size: 40px; 
    margin-top: 10px; 
    margin-bottom: 15px; 
} 
section h3.section-subheading { 
    font-size: 16px; 
    font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    text-transform: none; 
    font-style: italic; 
    font-weight: 400; 
    margin-bottom: 75px; 
} 
section .background1 { 
    background-color: #ffffff; 
    background-image: url('../img/bg.jpg'); 
    background-repeat: no-repeat; 
    background-attachment: scroll; 
    background-position: center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
} 
section .bg-layer { 
    background-color: rgba(50,50,50, 0.6); 
    padding: 50px 0; 
} 
section h2.bg-section-heading { 
    color: white; 
    text-transform: none; 
    font-size: 40px; 
    margin-top: 10px; 
    margin-bottom: 15px; 
} 
section h3.bg-section-subheading { 
    color: white; 
    font-size: 16px; 
    font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    text-transform: none; 
    font-style: italic; 
    font-weight: 400; 
} 

@media (min-width: 768px) { 
    section { 
    padding: 50px 0; 
    } 
} 
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
    font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    text-transform: uppercase; 
    font-weight: 700; 
} 
.bg-darkest-gray { 
    background-color: #222222; 
    padding: 0; 
    } 

Fiddle