Cropped and centered background image inside a circle

Question

I'd like to crop this image and set it as a background-image of the anchor tag which is a circle, how can I do that?

a {
  display: inline-block;
  width: 100px;
  height: 100px;
  color: #000;
  border: 1px solid black;
  border-radius: 50%;
  box-shadow: 0 0 4px black;
  text-align: center;
  line-height: 100px;
  text-decoration: none;
}

a:hover {
  background: #ffff99;
  border-color: white;
}

<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Products</a>
<a href="#">Contact</a>

Answer 1

You can use background-position to position the background and background-size (no support in IE8 though) to scale it:

a {
  background-image: url("http://www.kruger-us-targets.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/1/3/1300_p.png");
  background-position: center;
  background-size: 190%;
  display: inline-block;
  width: 100px;
  height: 100px;
  color: #fff;
  border: 1px solid black;
  border-radius: 50%;
  box-shadow: 0 0 4px black;
  text-align: center;
  line-height: 100px;
  text-decoration: none;
}

a:hover {
  color: #000;
  background: #ffff99;
  border-color: white;
}

<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Products</a>
<a href="#">Contact</a>