CSS Gradients with a Little Content

Question

When I use gradients with a bit of content, the gradient repeats, how can I prevent this?

http://jsfiddle.net/mcqpP/1/

I can try using html { height: 100%; }, but when my content needs to scroll ... repeating the gradient

http://jsfiddle.net/mcqpP/3/

How can i fix it

Answer 1

Why not make your gradient like a 1 pixel wide image and use something like the following:

body {  
     background-color: #fff;
     background-image: url("images/background.jpg");
     background-position: center top;
     background-repeat: repeat-x; 
}

Setting the background-repeat value will help you control how the background ... is repeated. In this case, it will be displayed as a solid bar at the top.

http://www.w3schools.com/css/pr_background-repeat.asp

, , moz- . .

Answer 2

CSS, . (.. IE6), , CSS .

, , , 100 : ? , , -.

, : http://jsfiddle.net/HJvpf/1/

body {
    background: -moz-linear-gradient(top, red 0%, blue 100%);  
    background: -webkit-gradient(linear, left top, left 100%, from(red), to(blue)); 
}

, jsFiddle , , , 100% html, body. height: 100%; body, , , , .

: , , , . repeat-x. http://www.w3schools.com/css/pr_background-repeat.asp

body {
    background: -moz-linear-gradient(top, red, blue) repeat-x;  
    background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue)) repeat-x; 
}

:

body {
    background: blue -moz-linear-gradient(top, red, blue) repeat-x;  
    background: blue -webkit-gradient(linear, left top, left bottom, from(red), to(blue)) repeat-x; 
}

Answer 3

I had the same problem, but I realized that this makes sense, and therefore just adopted a scroll / repeating gradient. You can set a fixed height, not%, but to ensure that the gradient does not repeat, you will need to set the height more than any screen that wants to view it. And you do not know what decisions people have. My advice is just to leave it.