White Space below repeated body background image

Question

I'm new to the programming world and have been experimenting to try and learn more. I'm creating a custom facebook tab using the static html i-frame application and keep running into an issue when repeating the body background image vertically. For a reason I cannot figure out, the image has a white gap between it and the repeated image. Any help would be much appreciated!

Here is the code:

    body {
    background-image:url('http://i1187.photobucket.com/albums/z389/mawler023/FBTabBody.png');
    margin:0;
    padding:0;
    background-position:right top;
    background-attachment: fixed;
    background-repeat:repeat-y;
    width:810px; 
    color: #333333;
    font-family: Verdana, Geneva, sans-serif;
    }`

Answer 1

The image you are using (http://i1187.photobucket.com/albums/z389/mawler023/FBTabBody.png) has a band of white at the top of it (a rough measure said it was about 123px in height). This is going to be showing on every repetition causing the gap you are observing.

You'll want to just trim the image and it should get rid of the gap.

If you want to have a white area at the top of the page (but not on repetitions) you are best off either reducing the area that you apply the background or putting an explicit white background on an element at the top.

Answer 2

因为图像本身顶部有一个巨大的白色空间