How can I display just a portion of an image in HTML/CSS?

Issue

Let's say I want a way to display just the the center 50x50px of an image that's 250x250px in HTML. How can I do that. Also, is there a way to do this for css:url() references?

I'm aware of clip in CSS, but that seems to only work when used with absolute positioning.

Solution

One way to do it is to set the image you want to display as a background in a container (td, div, span etc) and then adjust background-position to get the sprite you want.

Answered By - Espo