I have an image with more than 100 geometrical shapes with different size and dimensions, i used image mapping over it and assign id to each like
The area
element just makes part of an image clickable. It does not affect rendering, and setting background properties on it probably has no effect.
The background would matter if the image contains transparent areas. In such a case, you could overlay (with CSS positioning) the image with another image of the same dimensions and containing the desired colors; this image would of course have a lower z-index value. But it would be simpler to put the backgrounds into the image directly (unless you wish to use different backgrounds in different situations).