1

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>
user1787531
  • 789
  • 4
  • 10
  • 22

2 Answers2

0

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.

gen
  • 9,528
  • 14
  • 35
  • 64
0

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

Mayank Bothra
  • 93
  • 1
  • 1
  • 8