How to break an image into 9 small ones (sort of puzzle pieces)

Question

So, I tried creating a little puzzle game, which at the moment looks something like this

The top is the puzzle where you can put pieces that are chosen from a table with 1 row (scrollable) from the bottom of the page

Problem is those are 9 individual images cut from the original one.

I want to have only one image (the big one) and have them put into the bottom table in a similar manner to what's in the picture above in this post.

For simplicity sake, assume every table cell is 206px width 124px height, so the big picture is 618px width and 372px height (because that's the size of that random image I found online)

I've set an id to each td from the bottom table and tried using css sprite but to no avail.

I'm pretty sure I have to use sprite tho, I just can't seem to make it work. Plus, when I use background: url()... it automatically resizes the cells even tho they have a fixed size.

Thanks in advance

Possible duplicate of [Cutting an Image into pieces through Javascript](http://stackoverflow.com/questions/8912917/cutting-an-image-into-pieces-through-javascript) — Gaurav Chaudhary, Apr 10 '17 at 11:40
also possible duplicate of http://stackoverflow.com/questions/39800704/mask-image-into-multiple-portions-without-loading-image-multiple-times/39801079 — G-Cyrillus, Apr 10 '17 at 13:23

score 2 · Answer 1 · answered Apr 10 '17 at 11:38

Based on the size of source image (as whole) you can use javascript to calculate top and left point of each piece. Then allocate fixed size piece divs and set same (source) background image to each of them with different offset like this:

.piece-1 {
   background-image: url("...");
   background-position: right <CALCULATED RIGHT>px top <CALCULATED TOP>px;
}

score 1 · Accepted Answer · edited May 23 '17 at 12:25

Use background-position

Updated: Thanks to @GCyrillus comment (and code sample), it is now scalable)

html, body {
  margin: 0;
}
.puzzle {
  width: 100vh;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
}
.puzzle > div {
  width: 33.333%;
  height: 33.333%;
  background: red;
  border: 1px solid white;
  box-sizing: border-box;
  background: url(http://lorempixel.com/600/600/nature/1/) no-repeat;
  background-size: 300%;
}
.puzzle > div[data-piece1] {
  background-position: 0 0;
}
.puzzle > div[data-piece2] {
  background-position: 50% 0;
}
.puzzle > div[data-piece3] {
  background-position: 100% 0;
}

.puzzle > div[data-piece4] {
  background-position: 0 50%;
}
.puzzle > div[data-piece5] {
  background-position: 50% 50%;
}
.puzzle > div[data-piece6] {
  background-position: 100% 50%;
}

.puzzle > div[data-piece7] {
  background-position: 0 100%;
}
.puzzle > div[data-piece8] {
  background-position: 50% 100%;
}
.puzzle > div[data-piece9] {
  background-position: 100% 100%;
}

<div class="puzzle">
  <div data-piece1></div>
  <div data-piece2></div>
  <div data-piece3></div>
  <div data-piece4></div>
  <div data-piece5></div>
  <div data-piece6></div>
  <div data-piece7></div>
  <div data-piece8></div>
  <div data-piece9></div>
</div>

Scrambled

html, body {
  margin: 0;
}
.puzzle {
  width: 100vh;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
}
.puzzle > div {
  width: 33.333%;
  height: 33.333%;
  background: red;
  border: 1px solid white;
  box-sizing: border-box;
  background: url(http://lorempixel.com/600/600/nature/1/) no-repeat;
  background-size: 300%;
}
.puzzle > div[data-piece1] {
  background-position: 0 0;
}
.puzzle > div[data-piece2] {
  background-position: 50% 0;
}
.puzzle > div[data-piece3] {
  background-position: 100% 0;
}

.puzzle > div[data-piece4] {
  background-position: 0 50%;
}
.puzzle > div[data-piece5] {
  background-position: 50% 50%;
}
.puzzle > div[data-piece6] {
  background-position: 100% 50%;
}

.puzzle > div[data-piece7] {
  background-position: 0 100%;
}
.puzzle > div[data-piece8] {
  background-position: 50% 100%;
}
.puzzle > div[data-piece9] {
  background-position: 100% 100%;
}

<div class="puzzle">
  <div data-piece1></div>
  <div data-piece4></div>
  <div data-piece6></div>
  <div data-piece5></div>
  <div data-piece7></div>
  <div data-piece9></div>
  <div data-piece3></div>
  <div data-piece8></div>
  <div data-piece2></div>
</div>

Just give me a hint real quick. If I use sprite instead of 9 cut images how do I check if the puzzle is solved? before when I had 9 images I would name them 1, 2, 3, etc and I would know where each one should go and just check by `src` attribute. Is possible instead of having a table for the puzzle itself to have a div and check if it's background url it's the actual image? Not sure if that'd work — , Apr 10 '17 at 12:08
@Hansewl Give each a data-* attribute and check that .... will update my answer in a sec. — Asons, Apr 10 '17 at 12:30
@Hansewl Updated with a better selector and a `data-*` attribute, now you can move them around any way you want — Asons, Apr 10 '17 at 12:35
@Hansewl notice that with **background-size** it can also be resized : http://codepen.io/gc-nomade/pen/gmVKra (demo uses flex and order to move elements around via animation , not needed for your purpose if you use drag&drop) — G-Cyrillus, Apr 10 '17 at 13:25
@GCyrillus Thanks ... really good suggestion, updated my answer to be fully scalable and linked your codepen — Asons, Apr 10 '17 at 13:49

How to break an image into 9 small ones (sort of puzzle pieces)

2 Answers2

Linked