在CSS中的重复Y上翻转背景图片

Question

I have a gradient image as the background to my website and I am having problems making it look correct with all page sizes. The image is 291x1080 and I am having it do a repeat-x. This is fine with all pages that are no larger than 1080p. However, for a page with more content or a screen with a resolution larger than 1080p, a white space follows the background. I do not want to do a simple repeat-y because the gradient going from light to dark without a transition would be strange. Is there any way to flip the background image every time it does a repeat-y using CSS?

Answer 1

My suggestion: have the fabric texture and a gradient, not in an image.

For example:

body{
     background-image: url("/static/img/background.png") repeat, linear-gradient(top, #000000, #123456);
}

You should make sure you add the browser support tags (-webkit, etc)

For further reference check out this: How do I combine a background-image and CSS3 gradient on the same element?

Answer 2

This is the css to do this:

body {
    ...
    background: #eeeeee url("/static/img/background.png") 0 0 repeat-x;
    ...
}