Clipping Rectangles.
author: jim.cerny@unh.edu

This shows the basic graphic used in the CSS clipping and positioning example, annotated to show the coordinates used in the clipping.
(image with coordinates labeled)
The example uses three copies of this image of a woman's face (from Adobe's Retro Americana collection), to exercise these style properties:

For each of the three images a SPAN tag (container) is used with the STYLE attribute to define the style properties. In other words, this is done as an inline style specification for this example.

Use Photoshop, Paint Shop Pro, or a similar image editing program to get the image measurements in pixels. The coordinate system assumes 0,0 is in the upper left corner, with x-coordinates measured positively to the right and y-coordinates measured positively down. The annotated photo above shows the coordinates as used for the whole image and for the two clipping rectangles used.

Middle layer image.

This is the full 221w x 264h pixel image of the face. Positioning is specified in absolute offsets within the browser window, 150 pixels from the left margin and 100 pixels from the top margin. To control this image in the vertical stacking order, the z-index is set to 2 to place it in the middle of three planned images in the stack. No clipping rectangle (region) is specified, so the whole image is shown.

Bottom layer image.

This is the full 221w x 264h pixel image clipped to show the left part of the face. The left offset is 60 pixels and top offset is 0 pixels -- but remember these offsets are for the whole image, not from the clipped rectangle, so the effective offset to what is displayed may be greater. The z-index is 1, placing it on the bottom of this stack. The clip property specifies the outer edges of the rectangle to be displayed, in a special order:
   top right bottom left
Which in this case is:
  (84px 110px 264px 0px)
Consult the annotated image above.

Top layer image.

This is the full 221w x 264h pixel image clipped to show the eyes of the face. The left offset is 90 pixels and top offset is 250 pixels -- but remember these offsets are for the whole image, not from the clipped rectangle, so the effective offset to what is displayed is greater. The z-index is 3, placing it on the top of this stack. The clip property specifies the outer edges of the rectangle to be displayed, in a special order:
   top right bottom left
Which in this case is:
  (84px 192px 171px 55px)
Consult the annotated image above.

[an error occurred while processing this directive]