previous

page 2

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

This produces the four quarters one after the other. We will use CSS grid to get them into the right positions.

In the above, the first number is how many pixels to move the background image to the right so -100px means move it 100px to the left. Similarly the second number works in the same way in the vertical direction. And that's all there is to it! Clunky ... but it works!

previous
next