0

When using the CSS3 Background-size contain and background center in a div how can I differentiate in JavaScript whether the div or the actual image was clicked?

Please see the question in jsfiddle

EDIT

As indicated in the comment section, please notice that I'm sticking to this approach because the CSS3 styling of the div makes my life so easy because it properly aligns and centers the image in the div. Nevertheless, any other code that achieves the same result is welcome.

yazanpro
  • 4,512
  • 6
  • 44
  • 66
  • 1
    By far the easiest way is to add another element inside of the div that has the gun as its background image. Is there a reason you're not doing this? – alloy Jan 05 '15 at 23:49
  • because I need to keep the advantage of the way `div` fit, align, and center the background image using CSS3. That said, yes, I could go with the hard way and do an image child element in the div. – yazanpro Jan 05 '15 at 23:55
  • This question has an answer which might help you come up with a solution for this use case. http://stackoverflow.com/questions/1041399/how-to-use-javascript-or-jquery-to-read-a-pixel-of-an-image – Joel Cox Jan 06 '15 at 00:35
  • I could be wrong, but I don't think there's an easy way to target a background image. If you really can't just put an image in a div, I believe you could pull this off with canvas. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D – Brad Jan 06 '15 at 04:59

0 Answers0