I think you should try to repeat the header by having a image that you can use continuously. Here is how I would do it.
Ensure the Yellow bit is a transparent png, create a header div with 100% width (of course). Using CSS’s background position property you can shift it away from the center while ensuring that it repeats and has a Z-index higher than the div that will contain the menu items. From there, the rest is easy.
Not sure what you mean by the second comment, but as for the first, no need for any absolute position. Make the body bg color red. Then have a very wide background image at the top (in a #header div, if you like, that is centered on screen (background: url() no-repeat 50% 0; )
Remember that everything on the web is basically square, even if you fake it otherwise. So I would try positioning the menu in relation to the background image and cut out squares for the tab links (see picture below) that sit over the background image. Using pixels, things should line up OK. You’d include the text for the tabs with the image in this case, I’d say.