resizing css sprite

I've an image of dimension some 500X400 px (background.png) and then an HTML div of width 150X100 px.

I want to show the portion of the image background.png from top-left (x: 50, y: 50) to bottom-right (x1: 350, y1: 250) inside the div.

The dimension of the portion of background.png I want to show is 300X200, which is twice the size of the HTML div.

How do I resize the image p开发者_开发百科ortion so that it fits within the dimension of the div and display it using CSS or jquery.

You can use background-position: -50px -50px and the CSS3 background-size: 50% to achieve this result.

background-size isn't supported by old browsers, you can check support here.