はじめて質問させていただきます。

現在テンプレートのおみくじを使って背景画像を差し込みました。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
</head>

<style>
    body {
        background-image: url("images/TOP_BK.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        margin: 0;
        padding: 0;
        text-align: center;

    }

</style>
</head>
</html>

この背景画像にイメージマップを作りたいのですが、以下のコードはどこに差し込むべきかご教示ください。

<body>
<map name="TOP_BK">
<area shape="rect" coords="417,299,626,619" href="BP">
<area shape="rect" coords="13,299,224,619" href="BS">
<area shape="rect" coords="117,547,317,867" href="BJ">
<area shape="rect" coords="324,547,524,867" href="BH">
<area shape="rect" coords="324,51,524,371" href="BA">
<area shape="rect" coords="120,51,320,371" href="BC">
</map>

<img src="TOP_BK.jpg" usemap="#TOP_BK">

＊ちなみに背景画像内には6角形のイラストがあり、その6角形内をタップすると別ページへ行くようにしたいです。