跨浏览器背景图像重复Y渐变

Question

I have image 1*910px high, I want to make background.

here is my css:

body
{
    background-image:url('/Content/themes/start/images/bgw.png');
    background-position: 50% 100%;
    background-repeat: repeat-x;
    background-color: #e8f3fb;    
    color: #000;
}

If I have page with long content it looks good, but if page does not have long content the background doesn't display correctly.

I did try to set min-height , but it is not what I want to achieve.

Maybe there is some other way of doing this, or if not: how may I fix it?

Is there any way to make background more dynamic according to the content size?

Any advice/sample?

Answer 1

You could use a CSS gradient, they're reasonably well-supported now.

Eg

Fallback for older browsers

background: #333 url(gradient.gif) left top repeat-x;

Firefox, Safari/Chrome, and apparently Opera 11.10 and later

(Some earlier Operas support SVG in background images, which is another alternative for gradients , but I'm not sure how well it plays with the other methods. Plus you have to learn some SVG.)

background: -moz-linear-gradient(
    top,
    #333 0%,
    #555 100%
);
background: -o-linear-gradient(
    top,
    #333 0%,
    #555 100%
);
background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%,#333),
    color-stop(100%,#555)
);

IE

filter: progid:DXImageTransform.Microsoft.gradient(
    startColorstr='#333333',
    endColorstr='#555555',
    GradientType=0
);