CSS градиент тела

Question

Я создаю фон в элементе body, но когда я создаю фон, он использует окно height (только видимая высота), и если пользователь прокручивает страницу вниз, background повторяет его самостоятельно.Если я использую no-repeat, остальная часть страницы будет сплошной.

Я использовал background-size: 100% 100%;, но все еще не работает.

Мне нужен только фон, который идет от #ccc к# 000 и заполняет всю страницу без повторения .....

Может кто-нибудь быть таким добрым и помочь мне?Спасибо заранее!

РЕДАКТИРОВАТЬ: Мой код:

body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;

    background-repeat: no-repeat;
    background: rgb(204,204,204);
    background: -moz-linear-gradient(top,  rgba(204,204,204,1) 0%, rgba(0,0,0,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,204,204,1)), color-stop(100%,rgba(0,0,0,1)));
    background: -webkit-linear-gradient(top,  rgba(204,204,204,1) 0%,rgba(0,0,0,1) 100%);
    background: -o-linear-gradient(top,  rgba(204,204,204,1) 0%,rgba(0,0,0,1) 100%);
    background: -ms-linear-gradient(top,  rgba(204,204,204,1) 0%,rgba(0,0,0,1) 100%);
    background: linear-gradient(top,  rgba(204,204,204,1) 0%,rgba(0,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#000000',GradientType=0 );
}

ПОСЛЕДНИЕ РЕДАКТИРОВАТЬ:

body {
    background: #000;
    background-repeat: no-repeat;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
}

Примечание: Лучшее решение, которое я нашел,Когда я прокручиваю окно, вы можете видеть цвет background, потому что background-image не повторяется, а background-image заканчивается тем же цветом background, все в порядке!

Answer 1

К сожалению, вы не можете растягивать фоновые изображения, поэтому то, что вы видите, это то, что вы должны видеть.Обычно, когда сайты используют градиенты в качестве фоновых изображений, они делают так, чтобы верх градиента был на одном уровне с верхом экрана, установив background-position: 0 0, градиент повторяется горизонтально, установив background-repeat: no-repeat, а затем они установили background-color сайт должен быть того же цвета, что и нижняя часть градиента.

Существуют способы использования CSS3 и фильтров, в которых вы можете создавать градиенты для пользователей, но совместимость браузера с этими функциями ограничена.Вот скрипка, содержащая градиент: http://jsfiddle.net/Wexcode/qhMx9/. См. эту статью для получения дополнительной информации об этих функциях.