Strange CSS behaviour

I'm doing HTML and CSS for a site, and I've come across a very weird bug / behaviour that I can't pin down.

Take a look at http://www.atelierhsl.nl/antwerp/. There's a white line through the logo at the top. If I display:none the navigation at the bottom of the page, it disappears. But when I increase the bottom padd开发者_如何学Cing of the text column (.entry-content) it reappears again. This happens in Webkit, Mozilla and IE, so I know I must be doing something wrong. I just can't figure out what. Anybody?

This is caused by an anti-aliased line on the top your body's background images (just 1 pixel of light gray). The simple answer is to crop it using an image editor.
You may want to align the image to the top:

background: url("/wp-content/themes/transfer/images/bg.jpg") no-repeat scroll center top #1D1D88

The main problem is that the background image isn't as big as the the area it should cover.

Kobi's answer is correct, but if you don't mind a design suggestion: Rather than putting a black background image at no-repeat top for the body, separate body content into a container and a footer. For the content background use a smaller background image and tile it, or set the background color to black, since it appears you have no gradient. The footer div can then have a white background (inherited from the body, or just assigned directly).

You page is logically divided into main content and a footer, so the HTML should express that.

There is two solutions:

1. Just changed the body padding top from 60 to 40 or
2. changed the background position from center center to center top

I think, you should cut a 1px line from your background and to repeat-y it. There will be no bug, and you will decrease the image weight.