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.

Tags:

Css

Jquery