I learned front end coding about a year and a half ago and I've never used an image map. I've always just used background images and positioned/floated elements where I need them.

 

When is it better to use an image map and when is it better to use a background image?

A background-image is basically for visual effect, but you can of course put a link in a specific place over it, with a small button or hand pointer.

 

An image map is designed for links to specific coordinates over the map, it might be a real map of a country with links placed over each town name to link to hotels or whatever, or a photo of a group of people and links placed over the face of each person to give their profile or contact details.

I have seen image mapping being successful only when you have a splash page and maps. Some sites want to give clients/users the option to select their country or a specific item but are lazy to create separate images and position them, so they use the image mapping function of html. If you don't have the time, I guess you could use image mapping. But then again, it takes a lot of time to find the exact coordinates. And now you can have Photoshop or Fireworks slice your images for you and even code it. I think image mapping is slowly dying out.