Geek Answers Handbook

Max and min gradient size in CSS

background: -webkit-linear-gradient(#FFFFFF, #EAEAEA);
background: -o-linear-gradient(#FFFFFF, #EAEAEA);
background: -moz-linear-gradient(#FFFFFF, #EAEAEA);
background: linear-gradient(#FFFFFF, #EAEAEA);

What I basically want to do is to have some kind of minimum and maximum length of the gradient (for example, the gradient cannot be less than 500 pixels, even if there is a background, and it cannot be more than 500 pixels, even if background). I tried using this method:

background-size:500px;

(as well as combine it with background-repeat:y-repeat), but this will not work, since subsequently the gradient repeats itself from above (and I would like it to keep its final color through the rest of the element).

So briefly, I am wondering if there is a way to stop the gradient after a certain height, only allowing it to cover part of the element (therefore, so that it does not look different on all pages with elements of different sizes), without using images as a background. However, I would also like to know whether it is worth using this method, both in terms of compatibility and effort.

Thanks!

+4
source share
2 answers

You just need to add color termination to your gradient, for example:

Working example

body, html {
    height:200%;
}
body {
    background: -moz-linear-gradient(top, red 0px, white 500px, white 100%) no-repeat;
        background: -webkit-linear-gradient(top, red 0px, white 500px, white 100%) no-repeat;
}
Run codeHide result

MDN documentation for linear gradient

+3
source

, , , background-size, ( , background-size Firefox).

http://jsfiddle.net/myajouri/y4b3Z/

Chrome, Safari Firefox .

0

More articles:


All Articles