Css Displaying only center part of image

Question

Is it possible to display only center part of of image. For eg an image height =300 px and width=520px using CSS or JQUERY css would be better if possible else i can use Jquery, Googling didnt helped me

is it possible that i can show only 200 * 130 form the center using css for eg

 -----------------------
|                       |
|       --------        |
|      |Need this|      |
|      | Part    |      |
|       ---------       |
|_______________________|

Answer 1

You can set the image as the bg of an element, and then something like this:

        div {
            background: #eee url(http://www.google.co.cr/logos/classicplus.png) center center;
            width: 100px;
            height:100px;
            border: 1px solid red;
            text-indent: -9999px;
        }

<img src="http://www.google.co.cr/logos/classicplus.png">
<div>some text that won't be seen</div>

And end up with something like http://jsfiddle.net/9nBRe/

Answer 2

set following CSS :

.background{

background-position: -200px -130px;
background-image:url("image_name.png");
width:200px; height:130px;

}

Answer 3

If the image needs to be an <img> element, you can do it using an overlay image with a transparent "hole" punched in the center.

See http://jsfiddle.net/jkwSe/1/.

It's hard to see, but the image on top is white, but has a transparent center, like a rectangular donut. I left a little of the image on the right so you can see the effect.