Как сделать что-бы фон не дублировался?

Question

[Сергей]

В СSS делаю градиентный цвет фона но он у меня дублируется. Как сделать, что-бы он растягивался на весь экран?

background: rgb(242,246,248); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(242,246,248,1) 0%, rgba(216,225,231,1) 19%, rgba(181,198,208,1) 51%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(242,246,248,1)), color-stop(19%,rgba(216,225,231,1)), color-stop(51%,rgba(181,198,208,1)), color-stop(51%,rgba(181,198,208,1)), color-stop(100%,rgba(224,239,249,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(242,246,248,1) 0%,rgba(216,225,231,1) 19%,rgba(181,198,208,1) 51%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(242,246,248,1) 0%,rgba(216,225,231,1) 19%,rgba(181,198,208,1) 51%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(242,246,248,1) 0%,rgba(216,225,231,1) 19%,rgba(181,198,208,1) 51%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(242,246,248,1) 0%,rgba(216,225,231,1) 19%,rgba(181,198,208,1) 51%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

Answer 1

[Евгений Петров]

html{
	height:100%;
	background: #f2f6f8;
	background: -webkit-linear-gradient(-45deg,  rgba(242,246,248,1), rgba(216,225,231,1) 19%, rgba(181,198,208,1) 51%, rgba(224,239,249,1));
	background: -moz-linear-gradient(-45deg,  rgba(242,246,248,1), rgba(216,225,231,1) 19%, rgba(181,198,208,1) 51%, rgba(224,239,249,1));
	background: -ms-linear-gradient(-45deg,  rgba(242,246,248,1), rgba(216,225,231,1) 19%, rgba(181,198,208,1) 51%, rgba(224,239,249,1));
	background: -o-linear-gradient(-45deg,  rgba(242,246,248,1), rgba(216,225,231,1) 19%, rgba(181,198,208,1) 51%, rgba(224,239,249,1));
	background: linear-gradient(-45deg,  rgba(242,246,248,1), rgba(216,225,231,1) 19%, rgba(181,198,208,1) 51%, rgba(224,239,249,1));
}

А вот это посмешило:

rgb(242,246,248); /* Old browsers */

Старые не поймут rgb().

Comments

[Сергей]

Спасибо! ))
А что в этом коде было не так?

[Евгений Петров]

@Antaeus высота у любого элемента auto. И ваша картинка соответствует высоте контента. Дабы растянуть только на область просмотра, мы корневому элементу устанавливаем эту высоту.

Ну и вариант с /* Chrome, Safari4+ */... Вот поддержка свойства. Забудьте про это старьё. Собственно, и -moz-, и -o-, и -ms- уже также избыточны.

[Сергей]

@Petroveg получается, что фон растягивает на весь экран, а когда опускаю страницу фон снова дублируется. Обойти этого ни как нельзя?

[Евгений Петров]

@Antaeus я вот сейчас напишу, а вы скажете: «Блин, как же я сам не догадался!»

html{
	height:100%;
	background: linear-gradient(-45deg,  rgba(242,246,248,1), rgba(216,225,231,1) 19%, rgba(181,198,208,1) 51%, rgba(224,239,249,1)) no-repeat fixed;
}

[Сергей]

@Petroveg Спасибо! )))

[Евгений Петров]

@Antaeus вопрос решён?

[Сергей]

@Petroveg да ))