Question

I’d like to have a css background-image be a top-to-bottom gradient, and then a color. For example, if I wanted gradient that’s #FF0000 at the top, #00FF00 400 pixels from the top, and immediately cuts to #EFEFEF after that, how would it be done? Is there some form of background-image-repeat I could use?

Answer 1

The actual property is called background-repeat. You need to use it in conjunction with background-size to restrict the gradient to 400 pixels tall and prevent it from tiling:

html {
    background-color: #efefef;
    background-image: linear-gradient(#ff0000, #00ff00);
    background-repeat: no-repeat;
    background-size: 100% 400px;
}

jsFiddle preview

Of course, this assumes you’re using a CSS3 gradient, in which case browser support isn’t an issue as all browsers that implement CSS3 gradients also implement background-size. But if you’re using an image file for your gradient and you need to support older browsers, you’re going to have to create an extra element or a pseudo-element with the appropriate height and position, to contain just the gradient.