CSS header positioning to match with background texture

I have background image which looks like text开发者_如何学JAVAure, so the background image have to precisely continue one after another. That is fine, but main content of web page is centered. However, the header (with fixed width) overlaps the top part of background. Therefore, the header image don't continue smoothly with background image. I need some kind of grid, or another solution.

There is the link, you could check out my simple webpage with that issue:

example web page

PS: To see the issue, you need to have wide-screen (min 1183px)

Thanks.

Why don't you just pull out that diagonal repeating background off of your background image, create it to be another image, put that into a div, and make its zindex higher than the background and the header so it overlays?

1. Your header image should just use transparency instead of trying to replicate the lines exactly, and avoid the problem altogether.

2. If you insist, use background-position: 50% 0; on the body background to make it fixed to the center. Then no matter what size the screen, the backgrounds will stay aligned at the same place. Make a few adjustments to the image, and it will work fine.