Hexagon image background css - css

Question

How to use background image inside instead of background color (green)?
I want to use the image inside and on the sides leaving a white border
The problem is that when insert the image, it does not cover the entire area inside.
*, *:after, *:before {
box-sizing: border-box;
}
body {
background: rgba(128, 128, 128, 0.37);
margin: 0px;
padding: 0px;
}
.xpt {
text-align: center;
}
.xpt-hex {
position: relative;
z-index: 0;
color: #fff;
display: inline-block;
margin: 80px 5px 75px 5px;
}
.xpt-hex:before {
content: "";
position: absolute;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.xpt-hex, .xpt-hex:after, .xpt-hex:before {
width: 229px;
height: 143px;
background: #fff;
text-align: justify;
border-radius: 15px;
}
.xpt-ihex {
position: absolute;
z-index: 1;
left: 12px;
right: 12px;
top: 6px;
bottom: 6px;
}
.xpt-ihex, .xpt-ihex:after, .xpt-ihex:before {
background: #adcf24;
border-radius: 15px;
}
.xpt-ihex:after, .xpt-ihex:before {
width: 100%;
height: 100%;
}
.xpt-ihex:before {
content: "";
position: absolute;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.xpt-ihex:after {
content: "";
position: absolute;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
.xpt-box-inr {
z-index: 2;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.xpt-hex:after {
content: "";
position: absolute;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
<div class="xpt">
<div class="xpt-hex">
<div class="xpt-ihex">
<div class="xpt-box-inr"></div>
</div>
</div>
</div>
svg works
body{background: grey;}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="135px" height="100%" viewBox="87.5 87.5 65 73" xml:space="preserve" preserveAspectRatio="xMidYMid">
<defs>
<pattern id="ashex-img" height="100%" width="150px" patternContentUnits="objectBoundingBox" preserveAspectRatio="xMidYMid slice">
<image height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="http://screenwriter.kinoscenariy.net/wp-content/uploads/2013/07/boy-102832_1920-150x150.jpg"></image>
</pattern>
</defs>
<path fill="url(#ashex-img)" stroke="white" stroke-width="2" d="M146.38,105.483l-23.467-13.498c-0.785-0.452-1.819-0.7-2.912-0.7c-1.094,0-2.128,0.249-2.911,0.7 L93.62,105.483c-1.605,0.922-2.911,3.173-2.911,5.018v26.99c0,1.847,1.306,4.1,2.91,5.024l23.472,13.5 c0.784,0.45,1.817,0.699,2.909,0.699c1.091,0,2.125-0.249,2.913-0.699l23.468-13.5c1.605-0.927,2.912-3.18,2.912-5.024v-26.99 C149.293,108.658,147.985,106.406,146.38,105.483z"></path>
</svg>

Answer 1

TRY THIS FIDDLE
Fiddle example for hexagon with background image
using pseudo elements