Hola, soy novato y no sé cómo hacerlo exactamente
, pero lo que yo haría sería:
1: crear la imagen y dividirla en tres partes: la parte que se superpone a la capa azul, la parte que se superpone a la verde, y la parte que se superpone al contenido.
2: pondría la primera parte de la imagen (la que se superpone al azul) alineada como lo quieras; a continuación de ella, empezaría la capa azul (sí, no subexpuesta a la imagen).
3: pondría la segunda parte de la imagen bajo la primera, de tal manera que coincidan; y bajo esta segunda parte iniciaría el menú.
4: la tercera imagen la pondría dentro del contenido de tal manera que coincidiera con las otras dos.
Algo más gráfico:
http://img151.imageshack.us/img151/944/esquemahw3copiagl0.jpg
Bueno, estas soluciones que te he dado son más de jugar con la imagen que con el CSS, así que espero que seas bueno cacharriándole al Photoshop o alguno por el estilo
Aunque posiblemente sí se pueda con CSS...