previous

page 1

next
Jigsaw

Check the end result out here. Notice that, unlike our previous work, it is fixed in size.

This was unavoidable if I was to keep this tute reasonably simple.
So instead of using vmin units we will be using px which is short for pixel.

The main thing you will learn in this tute is one way to break an image up into pieces. It's a rather sneaky method but it works!

My first task is to show you how it works. I'm going to use this simple image which is 200px x 200px.

I'll show you how I divided it into four quarters each 100px x 100px.

We'll start with the red square which is real easy.

<style>
.piece {
height:100px;
width:100px;
}
#p1 {
background: url(images/squares.png) 0px 0px;
}
</style>
<div class='piece' id='p1'></div>

If you try this, you'll find that you end up with just a red square.

Notice the tricky way CSS requires you to specify the image filename.

On the next page I'll show you the trick for getting the other 3 squares.

previous
next