How can I make my image crop when resizing browser?

I'm really sorry if this is really simple but basically when I preview my website in a browser the background image is to big and the point I want in the middle of the browser is off screen. Instead of changing the size of the browser and white bars appear I want the image to scale but also crop so the middle point of the photo always stays in the center.

Here is an example of what I mean:

http://optimo.com/hatmaking

When you resize the browser the image gets smaller or bigger but also crops, meaning no bars ever appear. It also means that the center of the image always stays the same. I don't won't it to go into a small box when browser is made very small just the cropping and scaling.

Thank you so much for you help in advance.