1

I have to set some hotspots over a reponsive image.

The indispensable requirement is that after a certain height the background image will be "cropped" on top (using: background-position: 0 bottom).

In this example hotspots are ok until the image width is less than window width.

How can I preserve the correct positioning?

CodePen

grigno
  • 3,128
  • 4
  • 35
  • 47
  • possible duplicate of [Responsive image map](http://stackoverflow.com/questions/7844399/responsive-image-map) – Pete May 15 '14 at 13:49
  • Did you see my example? i have not a link map! – grigno May 15 '14 at 13:54
  • [ok try this one](http://stackoverflow.com/questions/21375747/link-on-certain-position-of-an-image-background-which-is-responsive). ps if you read the how to ask section you are meant to post your code on this site and not just link to it – Pete May 15 '14 at 14:03
  • 1
    @Pete - that's not quite the same either. this question is unique. try to solve it instead of trying to prove its not unique – MilkyTech May 15 '14 at 14:33
  • Note the "indespensible requirement". The issue here is that the OP wants the image to crop at the top once the window gets larger than the original image width (`background-size: cover;`)while still maintaining the hot spot position. – MilkyTech May 15 '14 at 14:36
  • @ChrisM if you use the second answer and place the links absolutely to the bottom using percentages it will work in the way the op wants, you'll just need to add overflow hidden to the container to stop the links popping out of the top – Pete May 15 '14 at 14:40
  • well, update his codepen with your solution and show us. usually when someone posts a question, they have already spent considerable time trying to solve it and want an answer, not to be pointed in the direction of more research. – MilkyTech May 15 '14 at 14:41
  • @ChrisM I don't see you helping in anyway or suggesting anything that may be useful to aid so why don't you do all the work and add an answer, by looking at the codepen, they may not have tried the solution that is found in the second answer so if they try that and get stuck I'd be happy to help – Pete May 15 '14 at 14:48
  • 1
    I AM doing the work trying to solve it. You are simply GUESSING that your second comment could solve it. Obviously having the links absolute to the bottom would solve it. Now try and implement it. not as easy as you think. Stop being a pretentious d-bag and ANSWER THE QUESTION or move on! – MilkyTech May 15 '14 at 14:59

0 Answers0