0

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 portion so that it fits within the dimension of the div and display it using CSS or jquery.

ptamzz
  • 9,235
  • 31
  • 91
  • 147
  • You have an example we can see? – Kyle Jun 07 '11 at 09:40
  • do you want the background of the 150x100 div to extend outside it? why is the div smaller than the background you want to the image portion you want to display, sorry can't quite see what you're asking – clairesuzy Jun 07 '11 at 09:43
  • No. The portion outside the div will not be visible. The div will mask the image. – ptamzz Jun 07 '11 at 09:46
  • Take a look at this solution. It works great!! http://stackoverflow.com/questions/2430206/how-can-i-scale-an-image-in-a-css-sprite – Diego Oct 09 '12 at 18:40

1 Answers1

1

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.

xPheRe
  • 2,333
  • 24
  • 33
  • 2
    background-size property resize hole image including sprites also.from your example it's resize hole image sprite horizontally or vertically 50%.check yourself. – sandeep Jun 07 '11 at 10:01
  • ..it solved. I had to resize the whole image using `background-resize` and by doing that, the portion of the image is also resized. So it anyway solves my issue. Thanks @xPheRe – ptamzz Jun 07 '11 at 10:20