Adding multiple images to this hexagon class

Question

I'm new to CSS and HTML and I was wondering if there is a way I can use the same css but have a different image inside each of the hexagons in this. I'd like to use multiple images in place of 'http://placekitten.com/240/240' without copying/writing too much code over and over.

Check out the fiddle below to see what I mean:

<div class="pfhex1">
    <div class="hexagon hexagon2">
    <div class="hexagon-in1"><div class="hexagon-in2"></div>
    </div></div>

        <div class="pfhex2">
    <div class="hexagon hexagon2">
    <div class="hexagon-in1"><div class="hexagon-in2"></div>
    </div></div>

http://jsfiddle.net/1v57w6xh/

Thanks so much.

change it with its parent `.pfhex1` `.pfhex2` coz the it changes — Vitorino fernandes, Dec 02 '14 at 18:10
relate question : http://stackoverflow.com/questions/26114920/responsive-grid-of-hexagons-with-img-tag/26116497#26116497 — web-tiki, Dec 02 '14 at 18:28

score 0 · Answer 1 · answered Dec 02 '14 at 18:10

0

You could either create a new class that has a different background image and apply that to the div you want to change, or create a new rule using your existing selectors, and apply the different background image to that, like:

.pfhex2 .hexagon.hexagon2 .hexagon-in1 .hexagon-in2 {
/* different image */
}

answered Dec 02 '14 at 18:10

j08691

204,283
31
260
272

Thanks so much, I've been at this all day and it's been infuriating. You solved my problem. – Mark Tolson Dec 02 '14 at 18:50

Adding multiple images to this hexagon class

1 Answers1