背景颜色不覆盖整个页面

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和body需要是相对高度才能达到全高

html, body {
  height: 100%
}

你可以在section中添加一个clearfix来强制它成为它的孩子的高度

.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

让身体可以滚动100％高度（并将背景放入其中，而不是部分）：

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.*/
}