Putting a background image in a CSS hexagon? [duplicate] - html

Question

This question already has answers here:
html/css hexagon with image inside
(7 answers)
Closed 8 years ago.
http://codepen.io/anon/pen/dqEbA
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?
Here's the CSS for reference:
.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;
}
And a snippet of the HTML:
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"</div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>

Answer 1

I guess it is, I would use :nth-child(). If, for instance, every third hexagon needs a background image, but they need the same picture:
.hex:nth-child(3n) {background-image: url('third.png');}
Although you can select manually the ones you need to change the background of:
.hex:nth-child(19) {background-image: url('bg19.png');}
.hex:nth-child(26) {background-image: url('bg26.png');}
And so on.

Answer 2

HTML
<div class="hex "><div class="bbc "></div><div class="middle abc"></div><div class="bbb "></div></div>
CSS
.hex .abc
{
background:red;
}
.bbc
{
border-bottom: 30px solid red;
width: 0;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
.bbb
{
width: 0;
border-top: 30px solid red;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
Make these Changes and try