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.

E.g.

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
);