100% height! Background image?

I need to make a new website and this is what was sent to me by the clients Photoshopper. I was just currious, If the best way to do this would be with a background image. As you can see a 100% height is required. So what would be the best way.

Thank you in advance.

It looks like the only 100% high element is the blue and gray vertical stripe and that could be done by repeating a slice on the body background. You can position it centrally by making sure the image is the layout width and not just the stripe width (e.g. include the body background colour on the right of the stripe until the image is the layout width). Then you can just center it on the body and repeat on the y-axis.

I would put the overlapping flourishes in the background of a 100% wide wrapper so that it doesn’t hold the page wide.

That then just leaves the main page layout to be done and will determine the real page width.

If you need the footer at the bottom then use the sticky footer technique (css faq). You could even do the stripe with the absolute overlay technique (that demo uses the old sticker footer code so don’t use it) but I don’t think you need it here anywa as the body background image will suffice for your design.