Question

If I have an image with a div wrapped around it, how do I make it only show a certain section of the image?

<div id=#container"><img src="hello.jpg" /></div>

Lets say I want the image to only display a width of 200px and a height of 200px. I also want it to start showing it 10pixels from the top, and 30 pixels to the left.

Answer 1

If your <div id="#container"> is absolutely positioned, you can use the clip property:

#container {
    /* top, right, bottom and left points of the rectangle */
    clip: rect(10px, 230px, 210px, 30px);
}

The above would create a rectangular clip with its top-left corner 10px from the top and 30px from the left. Its bottom-right corner is 210px from the top and 230px from the left (which gives you your 200px of width and height).

You can read more about it in this article.