select part of a jpeg image to display in html

select part of a jpeg image to display in html

I am quite new to web programming in general and I was wondering how I
could show a part of an image on a html page (similar to sprites - i.e
without modifying it in photoshop/gimp etc).
So, I have the following image, where, I would like just the "Connect with
Facebook" including the rounded corners.
How can I achieve this using HTML/CSS?
I tried to copy relavent bits using GIMP and then exporting it back to
jpeg etc.. but the final image seems to loose quality.
At the end I do something like (using twitter bootstrap):
<div class="row-fluid pagination-centered">
<ul class="thumbnails">
<li class="span4 offset4">
<a class="thumbnail" href="#">
<img alt="Facebook stuff" data-src="holder.js/273x42"
style="width: 273px; height: 42px;" src="fb.jpg">
</a>
</li>
</ul>
</div>
Therefore, I would like to know how to show that part of the image without
modifying the image itself.
Any guidance would be greatly appreciated. Thanks.