Question

我正在写一个网站作为我大学课程的一部分，但我遇到了一个问题。我似乎无法适应整个屏幕。

请访问此处查看我的意思：http://jsfiddle.net/xiiJaMiiE/gM3yk/

html, body 
{
background-image: -webkit-gradient(linear, right bottom, right top, color-stop(0, #5977FF),
color-stop(1, #59C5FF));
background-image: -o-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: -moz-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: -webkit-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: -ms-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: linear-gradient(to top, #5977FF 0%, #59C5FF 100%);
background-repeat:no-repeat;
background-size:cover;
background-
}

提前致谢

Answer 1

您需要将html / body的高度设置为100％;

height: 100%;

http://jsfiddle.net/gM3yk/1/

Answer 2

授予父height和width，建议使用background-size:100% 100%;而不是background-size:cover;

html, body {
    background-image: -webkit-gradient(linear, right bottom, right top, color-stop(0, #5977FF), color-stop(1, #59C5FF));
    height: 100%;    /* added */
    width: 100%;    /* added */
    background-image: -o-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
    background-image: -moz-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
    background-image: -webkit-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
    background-image: -ms-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
    background-image: linear-gradient(to top, #5977FF 0%, #59C5FF 100%);
    background-repeat:no-repeat;
    background-size:100% 100%;    /* updated*/
}

Answer 3

只需添加

width:  100%;
height: 100%;

如何使背景适合整个屏幕？

3 个答案: