mettre des images de fond pour chaque menu

Question

J'essaie de mettre des images de fond pour chacun de mes menus hexagonaux que j'utilise comme navigation principale. Mais je ne peux pas comprendre comment implémenter le code pour amener les images d'arrière-plan dans le menu hexagonal. Ci-dessous vous pouvez voir le code CSS et HTML.

CSS

ul.hex {padding:0; margin: 50px auto; list-style: none; width:104px; height:60px;  position:relative;} 

    ul.hex li a {display:block; width:104px; height:60px; position:absolute; left:0; top:0; z-index:100; text-align:center; text-decoration:none; font:normal 18px/60px "Arial"; color: #fff; 
    outline: 0; 
} 

    ul.hex li a:before {display: block; content:""; width:104px; height:60px; position:absolute; left:0; top:0; z-index:-1; 
-webkit-transform: rotate(60deg); 
-moz-transform: rotate(60deg); 
-ms-transform: rotate(60deg); 
-o-transform: rotate(60deg); 
transform: rotate(60deg); 
} 

ul.hex li a:after {display:block; content:""; width:104px; height:60px; position:absolute; left:0; top:0; z-index:-1; 
-webkit-transform: rotate(-60deg); 
-moz-transform: rotate(-60deg); 
-ms-transform: rotate(-60deg); 
-o-transform: rotate(-60deg); 
transform: rotate(-60deg); 
} 

ul.hex li:nth-child(1) a, 
ul.hex li:nth-child(1) a:before, 
ul.hex li:nth-child(1) a:after {background:#cb3927; 
} 

ul.hex li:nth-child(1) a:hover, 
ul.hex li:nth-child(1) a:hover:before, 
ul.hex li:nth-child(1) a:hover:after {background-color:#cb3927; color:#fff; 
} 

ul.hex li:not(:first-child) a, 
ul.hex li:not(:first-child) a:before, 
ul.hex li:not(:first-child) a:after {background-color:#fff; color:#8d0f26; 
} 

ul.hex li:not(:first-child) a:hover, 
ul.hex li:not(:first-child) a:hover:before, 
ul.hex li:not(:first-child) a:hover:after {background-color:#8d0f26; color:#f36e33 ; 
} 

ul.hex li {width:104px; height:60px; position:absolute; left:106px; top:0; 
-webkit-transform-origin: -54px 30px; 
-moz-transform-origin: -54px 30px; 
-ms-transform-origin: -54px 30px; 
-o-transform-origin: -54px 30px; 
transform-origin: -54px 30px; 
} 

ul.hex li:nth-child(1) {left:0;} 

ul.hex li:nth-child(3) { 
-webkit-transform: rotate(60deg); 
-moz-transform: rotate(60deg); 
-ms-transform: rotate(60deg); 
-o-transform: rotate(60deg); 
transform: rotate(60deg); 
} 

ul.hex li:nth-child(3) a { 
-webkit-transform: rotate(-60deg); 
-moz-transform: rotate(-60deg); 
-ms-transform: rotate(-60deg); 
-o-transform: rotate(-60deg); 
transform: rotate(-60deg); 
} 

ul.hex li:nth-child(4) { 
-webkit-transform: rotate(120deg); 
-moz-transform: rotate(120deg); 
-ms-transform: rotate(120deg); 
-o-transform: rotate(120deg); 
transform: rotate(120deg); 
} 

ul.hex li:nth-child(4) a { 
-webkit-transform: rotate(-120deg); 
-moz-transform: rotate(-120deg); 
-ms-transform: rotate(-120deg); 
-o-transform: rotate(-120deg); 
transform: rotate(-120deg); 
} 

ul.hex li:nth-child(5) { 
-webkit-transform: rotate(180deg); 
-moz-transform: rotate(180deg); 
-ms-transform: rotate(180deg); 
-o-transform: rotate(180deg); 
transform: rotate(180deg); 
} 

ul.hex li:nth-child(5) a { 
-webkit-transform: rotate(-180deg); 
-moz-transform: rotate(-180deg); 
-ms-transform: rotate(-180deg); 
-o-transform: rotate(-180deg); 
transform: rotate(-180deg); 
}` 

HTML Voici la liste non ordonnée pour mes liens que je me sers pour ma navigation

<div id="hexagon"> 
<ul class="hex"> 
    <li><a href="">HOME</a></li> 
    <li><a href="">ABOUT</a></li> 
    <li><a href="">BLOG</a></li> 
    <li><a href="">WORK</a></li> 
    <li><a href="">CONTACT</a></li> 
</ul> 
</div> 

Answer 1

je pense que THIS question précédemment répondu peut être utile.
Il construit fondamentalement l'exagon d'une manière légèrement différente, pas trop difficile à implémenter.