CSS: Hexagon with custom background image

---HTML---
<div class="hexagon">
  <div class="hexTop"></div>
  <div class="hexBottom"></div>
</div>



---CSS---
.hexagon {
  position: relative;
  width: 200px;
  height: 115.47px;
  margin: 57.17px 0;
  background-image: url(images/menu-item-generator-bg.jpg);
  background-size: auto 219.3931px;
  background-position: center;
  border-left: solid 5px #333;
  border-right: solid 5px #333;
  transition: all 0.7s;
  cursor: pointer;
}

.hexTop,
.hexBottom {
  position: absolute;
  z-index: 1;
  width: 141.42px;
  height: 141.42px;
  overflow: hidden;
  transform: scaleY(0.5774) rotate(-45deg);
  background: inherit;
  left: 24.29px;
}

.hexTop:after,
.hexBottom:after {
  content: "";
  position: absolute;
  width: 190px;
  height: 109.6965px;
  transform: rotate(45deg) scaleY(1.7321) translateY(-54.84px);
  transform-origin: 0 0;
  background: inherit;
}

.hexTop {
  top: -70.7107px;
  border-top: solid 7.0711px #333;
  border-right: solid 7.0711px #333;
  transition: all 1.4s;
}

.hexTop:after {
  background-position: center top;
}

.hexBottom {
  bottom: -70.7107px;
  border-bottom: solid 7.0711px #333;
  border-left: solid 7.0711px #333;
  transition: all 1.8s;
}

.hexBottom:after {
  background-position: center bottom;
}

.hexagon:after {
  content: "";
  position: absolute;
  top: 2.8868px;
  left: 0;
  width: 190px;
  height: 109.69px;
  z-index: 2;
  background: inherit;
}