Css Displaying only center part of image
set following CSS :
.background{
background-position: -200px -130px;
background-image:url("image_name.png");
width:200px; height:130px;}
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/
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.