Hello, i have created a html/css version of one of my psds and pretty much everything is working fine, just the background image or the container div to which background image is assigned is not stretching vertically to 100%.

Here is the Link to Live version of What i have Done.


This is the CSS for the Main Container.

#maincontainer {
    background-image: url("img/bg.jpg");
    background-repeat: repeat-y;
    height: 1750px;
    margin: 0 auto;
    width: 900px;

When i Set the Height to 100% it just disappers can anyone please help me with this? If you have fireshot try editing the height of maincontainer to 100% and see the error.

... in that css use only "repeat" not "repeat-y" for background-position, the background image will be repeated both vertically and horizontally. This is the default fill.

shall I know what browser you are using?

it was not stretching in all browsers, but then used this property display:table and now i removed the height and its still stretching.

Ok, it is easy. Remove the attribute height and add css overflow:hidden;

Replacing it with Overflow hidden worked Tongue But not sure and waiting for the explanation, no hurry though thanks.