背景色がページ全体を覆わない

Question

紫色の背景色がページ全体を覆いたいが、背景色が画像より先になるようにしたい。これをどうやって解決しますか？

HTML

<div class="section about"> 
     <div class = "title"> Our Team </div> 
     <p class = "description"> The iGEM Team is comprised of 32 ppl. </p> 

     <img class="aboutImage" src="images/teamPhoto.jpg" alt="Team Photo" width = "600" /> 
    </div> 

CSS（更新されたコード）

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 

.section { 
    background-image: linear-gradient(137deg, #D0BAFF 0%, #AD8BF6 27%, #AA88FE 52%, #B77BF6 73%, #D7AAEB 100%); 
} 

.about { 
    padding-top: 7%; 
    position: relative; 

} 

.about .description { 
    margin-left: auto; 
    margin-right: auto; 
} 

.about .title { 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
} 
.aboutImage { 
    position: absolute; /*absolute means object will be relative to the next parent element with relative (or absolute) positioning.*/ 
} 

Answer 1

htmlと体が

を動作するように相対的な高さのための完全な高さである必要があなたはそれの高さに、それを強制的にセクションにclearfixを追加することができます

html, body { 
    height: 100% 
} 

ジャスト（セクションと、それに背景を入れて、ではない）100％の高さと体をスクロール可能子供

.section:after { 
    visibility: hidden; 
    display: block; 
    content: ""; 
    clear: both; 
    height: 0; 
    } 
* html .section    { zoom: 1; } /* IE6 */ 
*:first-child+html .section { zoom: 1; } /* IE7 */ 

Answer 2

です：

http://codepen.io/themeler/pen/JEBWWb

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    overflow: auto; 
    background-image: linear-gradient(137deg, #D0BAFF 0%, #AD8BF6 27%, #AA88FE 52%, #B77BF6 73%, #D7AAEB 100%); 
} 

.about { 
    padding-top: 7%; 
    position: relative; 
} 

.about .description { 
    margin-left: auto; 
    margin-right: auto; 
} 

.about .title { 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
} 
.aboutImage { 
    position: absolute; /*absolute means object will be relative to the next parent element with relative (or absolute) positioning.*/ 
}