The CSS defines one container style, then the styles for the four boxes that comprise the complete image.
The container looks like this:
#container {
width:267px;
height:272px;
top:100px;
left:100px;
position:absolute;
font-size:16px;
text-shadow:white 0px 0px 6px;
text-align:center;
}
Then the four boxes defining the segments of the image are defined. Let's look at them one at a time.
#box1 {
background-image: -moz-image-rect(url(firefox.png), 0%, 50%, 50%, 0%);
width:133px;
height:136px;
position:absolute;
}
This is the top-left corner of the image. It defines a rectangle containing the top-left quarter of the image in the file firefox.jpg
.
#box2 {
background-image: -moz-image-rect(url(firefox.png), 0%, 100%, 50%, 50%);
width:133px;
height:136px;
position:absolute;
}
This defines the top-right corner of the image.
The other corners follow a similar pattern:
#box3 {
background-image: -moz-image-rect(url(firefox.png), 50%, 50%, 100%, 0%);
width:133px;
height:136px;
position:absolute;
}
#box4 {
background-image: -moz-image-rect(url(firefox.png), 50%, 100%, 100%, 50%);
width:133px;
height:136px;
position:absolute;
}