3

I want to show part of an image, and scale the part of the image I show (either larger or smaller) within a webpage. It's really easy to show part of an image using css, for example:

$("#myDiv").css({
  width: 100,
  height: 100,
  background: "url('myurl.jpg')",
  backgroundPosition: "-100px -100px"
});

This pulls in the image at url "myurl.jpg", and displays a box 100 px square, at position 100,100 of that image: so all you see of myurl.jpg is that little box. However, I want to make this box bigger or smaller inside my webpage, say scaling it 50 px square. I can see lots of ways of scaling the background image, while showing it all. (eg, the very neat backstretch plugin (http://srobbin.com/jquery-plugins/backstretch/). But I don't see readily how to extract and scale at the same time.

Ideas please! (I am working in JQueryMobile so the answer needs to work there)

Peter Robinson
  • 363
  • 4
  • 17
  • https://developer.mozilla.org/en-US/docs/Web/CSS/background-size ? – Jonas Grumann Mar 17 '14 at 13:13
  • @PeterRobinson What you are talking about is css sprites. That's the right terminus – yunzen Mar 17 '14 at 13:20
  • possible duplicate of [Background size with css with sprites](http://stackoverflow.com/questions/9099538/background-size-with-css-with-sprites) – yunzen Mar 17 '14 at 13:21
  • background-size does not work in this combination -- it seems to overrule the background-position property, so that the portion of image shown is the top left. – Peter Robinson Mar 17 '14 at 13:26
  • The answer at Background size with css with sprites does NOT help. That shows how to use background-size to resize the background image. Problem is that this does not play with the use of background-position and width to extract part of the image only. – Peter Robinson Mar 17 '14 at 13:33
  • please describe what you want PeterRobinson. Do you want a element that always contains a background even when the containers dimensons change? – Nico O Mar 17 '14 at 13:55
  • What I have is a large image of a manuscript page. I want to show just one line of the manuscript inside a box on a page. But the image is very large, and so just showing the line of the manuscript is too large. So I want to make it smaller. Say: the original line in the image is 100 px high by 2000 px wide. I want to extract that line and scale this to say 25px by 500 px. In the past I've done this using ImageMagick to pre-create all the extracted images, and then scaled them in . I see that I can extract with css .. but not scale at the same time. – Peter Robinson Mar 17 '14 at 14:00

1 Answers1

3

It looks like you're just missing the backgroundSize attribute.

See demo jsfiddle

$("#myDiv").css({
  width: 200,
  height: 50,
  background: "url('http://lorempixel.com/400/1000/sports/3/')",
  backgroundPosition: "0 -365px",
  backgroundSize: "200px 500px"
});
Grant Gibson
  • 793
  • 3
  • 11
  • 1
    Yes!!! it works!! A small note: according to the documentation backgroundSize: "50%" should work. For some reason I don't understand, it does NOT work. You have to specify the rescaled image dimensions in pixels as you do here. But that said -- perfect. – Peter Robinson Mar 17 '14 at 15:27