HTML background image not repeating correctly

Question

Im busy designing a site from a psd mockup, however im having trouble getting an image to repeat correctly.

Here is the mockup:

Here is a picture of my site (notice how the background stops before it gets to the end)

Something to note, when I take away the css height property, the background image disappers completly, which I find very strange...?

The bg image is just a small image that gets repeated.

Ive been stuck on this all morning if someone can tell me what I am doing wrong it will be greatly appreciated.

#wrapper {
    background: url("images/background.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
    height: 1000px;
    margin: 0 auto;
    padding-left: 0;
    width: 1380px;
}

Please let me know if I should add some more code.

Answer 1

I think the problem is you have hardcoded the height and width. So, after covering the specified px the background cuts off. Set height as;

height:100%;
width:100%;

Answer 2

Increase the height to 2000px

 height: 2000px;

Answer 3

Try adding height: 100% or in px like 3000px etc (depending upon your required page length). Currently background is repeating fine but its repeating for height hard coded by you which is less than page length.

Its better not to hard code height. As if page length increase you have to change the height again and again. The right solution to this is to provide height: 100%;.

good luck!