How to create a rounded hexagon with background image?

Question

I've searched through the net and could not find any proper solution. I need to know if there's a solution to make a hexagon with rounded corners and insert a background image into that hexagon so it fills it up entirely. In case if there's no way to make fully with CSS3, is there a way to do so by using background images? For instance, I have this rounded hexagon as a background image:

    .staff_hexagon {
    position: relative;
    display: block;
    height: 200px;
    width: 100%;
    background: url('../img/staff_hexo.png') center center no-repeat;
    background-size: contain;
    overflow: hidden;
    }

Is there a way to put a background image inside the above-mentioned hexagon? Thanks!

Answer 1

Just in case you want a non-svg option, here is a complicated and not quite good-looking posibility

The rounding of the corners can be somewhat adjusted playing with composite radius

.container {
  width: 300px;
  height: calc(300px * 0.5714);
  margin: 80px;
  position: relative;
}
.frame {
  width: 100%;
  height: 100%;
  border-radius: 30px / 90px;
  position: absolute;
  overflow: hidden;
}
.r {
  transform: rotate(60deg);
}
.l {
  transform: rotate(-60deg);
}
.inner {
  width: 100%;
  height: 190%;
  top: -45%;
  position: relative;
  background-image: url(http://lorempixel.com/800/600);
  background-size: 190%;
  background-position: center center;
  background-repeat: no-repeat;
}
.r .inner {
  transform: rotate(-60deg);
}
.l .inner {
  transform: rotate(60deg);
}

<div class="container">
  <div class="frame h">
    <div class="inner"></div>
  </div>
  <div class="frame r">
    <div class="inner"></div>
  </div>
  <div class="frame l">
    <div class="inner"></div>
  </div>
</div>

Answer 2

I think you're looking for clip-path property. It can use generated shapes or external svg.

div.test {
    background: url(http://lorempixel.com/output/cats-q-c-200-200-5.jpg) no-repeat 50% 50%;
    background-size: cover;
    -webkit-clip-path: url(#myClip);
    clip-path: url(#myClip);
    width: 200px;
    height: 200px;
}

<div class="test">
  
</div>

<svg width="0" height="0">
  <defs>
    <clipPath id="myClip" clipPathUnits="objectBoundingBox">
      <polygon points=".41,.02 .59,.02 
                       .91,.16 1,.33 
                       1,.66 .91,.83 
                       .59,.98 .41,.98 
                       .09,.83 0,.66
                       0,.33 .09,.16
                       " 
               />      
      
      <circle cx=".5" cy=".2" r=".2" /> <!-- top -->
      <circle cx=".5" cy=".8" r=".2" /> <!-- bottom -->
      <circle cx=".8" cy=".33" r=".2" /> <!-- right top -->
      <circle cx=".8" cy=".66" r=".2" /> <!-- right bottom -->
      <circle cx=".2" cy=".33" r=".2" /> <!-- left top -->
      <circle cx=".2" cy=".66" r=".2" /> <!-- left bottom -->
    </clipPath>
  </defs>
</svg>