How to separate the background into three divs that can be flipped?

I'm trying to add a background to my HTML5 / CSS3 site, however I'd like to divide it into three divs that can flip when the cursor is hovered over.

So, I suppose the best thing to do is to make three divs side by side (the complete area of my screen) and then apply three backgrounds to each of these three divs, each of which is a different part of my background image.

Is there anyone here who could kindly teach me how to do that with a snippet?