How to bind points to the background image div?

[Ybelyavsky]

How to bind points to the background image div?

Living example

<section>
    <div class="container main-background" id="main_foto_hotspots">
      // img background
    </div>
</section>

.main-background {
  background-image: url(main_foto.webp);
  background-repeat: no-repeat;
  background-position-x: right;
  background-position-y: top;
  background-size: 50%;
}

jQuery('#main_foto_hotspots').hotspot({
  data: [
    { "x":18, "y":38, "Title":"The Title","Message":"Create the Message here" },
    { "x":43, "y":40, "Title":"jQuery Hotspot","Message":"This jQuery Plugin lets you create hotspot to any HTML element." }
  ],
  tag: '**div.background**', //optional (default is img)
  interactivity: "click", // options : click, none (default is hover)
  hotspotClass: 'Hotspot'
});