Question

I am making a background in the body element but when I make a background it uses the window height (only the visible height) and if the user scrolls the page down the background repeats it self. If I use no-repeat the rest of the page is in solid color.

I have used background-size: 100% 100%; but still not working.

I only want a background that goes from #ccc to #000 and fills the entire page without repeating itself…..

Can anyone be so kind and help me? Thanks in advanced!

EDIT:
My code is:

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 );
}

LAST EDIT:

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

note: The best solution I found. When I scroll the window you can see the background color because the background-image does not repeat and as the background-image ends with the same background color everything is ok!

Answer 1

Unfortunately, you cannot stretch out background images, so what you are seeing is actually what you’re supposed to see. Normally when sites use gradients as background images, they make it so the top of the gradient is flush with the top of the screen by setting background-position: 0 0, the gradient repeats itself horizontally by setting background-repeat: no-repeat, and then they set the background-color of the site to be the same color as the bottom of the gradient.

There are ways using CSS3 and filters in which you can create gradients for users, but there is a limited amount of browser-compatibility for these features. Here is a fiddle containing a gradient: http://jsfiddle.net/Wexcode/qhMx9/. See this article for more information about those features.