Создание страницы заполнения градиентом фона с помощью css

У меня есть этот фон градиента, но я не хочу, чтобы он повторял способ заполнения страницы, я хочу, чтобы это был один большой градиент, который заполняет страницу.

HTML:

<!DOCTYPE html>
<head>
    <meta charset = "UTF-8"/>
    <title>Home</title>
    <link rel="stylesheet" text="text/css" href="css.css">
</head>
<body>
    </body>

CSS

p {
    font-family:"Arial Black";
    line-height:120%;
}
html {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: #70bg32;
    background-repeat:no-repeat;
    background: -webkit-linear-gradient( to left top, blue, red);
    background: -moz-linear-gradient( to left top, blue, red);
    background: -ms-linear-gradient( to left top, blue, red);
    background: -o-linear-gradient( to left top, blue, red);
    background: linear-gradient( to left top, blue, red);
}

http://jsfiddle.net/F7vf9/

Ответы

Ответ 1

Чтобы градиент заполнил область просмотра, дайте элементу <html> высоту 100%: fiddle

html {
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: #70bg32;
    background-repeat:no-repeat;
    background: -webkit-linear-gradient( to left top, blue, red);
    background: -moz-linear-gradient( to left top, blue, red);
    background: -ms-linear-gradient( to left top, blue, red);
    background: -o-linear-gradient( to left top, blue, red);
    background: linear-gradient( to left top, blue, red);
}

Чтобы предотвратить повторение градиента над видимым участком окна просмотра (при условии наличия полосы прокрутки), замените height: 100%; на min-height: 100%;.

Ответ 2

На сегодняшний день никто из вышеперечисленных не работает. Линейный градиент повторяется.

Чтобы растянуть градиент по всей странице, вы должны добавить это в css:

body {
  background: linear-gradient(to left top, blue, red) fixed;
}

Что все.

Ответ 3

Я согласен с Adrift, добавляя высоту: 100% к тегу html растягивает градиент. Вы также можете удалить обложку background-size:. Это также работает:

html {
  height: 100%;
}
body {
  width: 100%;
  background: linear-gradient(to left top, blue, red);
}

Вы можете добавить остальные линейные градиенты для других браузеров без каких-либо проблем. Надеюсь, это поможет!

Ответ 4

Я не могу комментировать, потому что я гость, но я так горжусь Techno.Shaman, так как его ответ мне очень помог !!! Извините, что отвечаю, а не комментирую.

Ответ 5

На случай, если это кому-то еще нужно:

Я заставил свою работу работать, увеличив высоту секции, у которой градиентный фон выше 200%.

(Я включил без повтора и покрытия, но это не имело никакого эффекта)

mySection {
    width: 100%;
    height: 220%; 
    background: linear-gradient(90deg, rgb(23, 156, 57) 5%, rgb(33, 211, 27) 60%)
                center center no-repeat/ cover;
}