Responsive map made of multiple image files

I'm pretty much a total noob when it comes to responsive web design and I'm attempting to produce a responsive web app with an interactive map.

The map is made up of seven separate image files - one for each region. The map has to be split in to separate images so that I can change the transparency of each image (and therefore, the regions color intensity) depending on data taken from the database.

I want the map to be centered but I also want each region's individual image (that makes up the map) to retain its position.

The best analogy I can think of is a jigsaw where the pieces maintain their correct position to complete the jigsaw's image even when the browser is resized.

What is the easiest way for this to be achieved?

Bare in mind that I still need to be able to control the transparency of each regions image.

Any help or suggestions would be greatly appreciated as I do not know where to start! Sorry if my description is poor - feel free to probe.

Cheers,

Will