title: Putting a background image in a CSS hexagon?
body: <p><a href="http://codepen.io/anon/pen/dqEbA" rel="nofollow">http://codepen.io/anon/pen/dqEbA</a></p>
  
  <p>I'd like to be able to replace some of the green backgrounds with image backgrounds... is this possible with the CSS I'm using now, or do I have to an alternative CSS layout to make it possible?</p>
  
  <p>Here's the CSS for reference: </p>
  
  <pre><code>.hex {
      float: left;
      margin-left: 3px;
      margin-bottom: -26px;
  }
  .hex .top {
      width: 0;
      border-bottom: 30px solid #6C6;
      border-left: 52px solid transparent;
      border-right: 52px solid transparent;
  }
  .hex .middle {
      width: 104px;
      height: 60px;
      background: #6C6;
  
  }
  .hex .bottom {
      width: 0;
      border-top: 30px solid #6C6;
      border-left: 52px solid transparent;
      border-right: 52px solid transparent;
  }
  .hex-row {
      clear: left;
  }
  .hex-row.even {
      margin-left: 53px;
  }
  </code></pre>
  
  <p>And a snippet of the HTML:</p>
  
  <pre><code>&lt;div class="hex"&gt;&lt;div class="top"&gt;&lt;/div&gt;&lt;div class="middle"&gt;&lt;/div&gt;&lt;div class="bottom"&lt;/div&gt;&lt;/div&gt;
  &lt;div class="hex"&gt;&lt;div class="top"&gt;&lt;/div&gt;&lt;div class="middle"&gt;&lt;/div&gt;&lt;div class="bottom"&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>