#clipbox {
     position: absolute;
     clip: rect(50px 300px 350px 100px); /* the same as example 1 */
     }

<div id="clipbox">
     <img src="../css-discuss/images/2nd-castle525x355.jpg" width="525" height="355">
</div>

Turn background off / on (javascript)

Undo / redo clipping (javascript)
 

---

We see that the clipping area has just the same position!

• If the clip data are in a concrete unit (here: px), the area stays where it is, no matter the format of the clipped image!
• The specs say: with the clip-value "auto" the 'margin' of the area in one ore more directions can be set to zero.

The defined rectangle can be seen as a view port to the selected area of the image: the rest of the image is transparent.
Notice: often it's easier to position a part of an image by calling it as a background img in an 'area container' (doesn't need to be absolutely positioned), with shifting the background position to get the starting coordinates.
For background positioning: see "The Porthole Theory".

back to example 1