0

I was wondering what the easiest and simplest method was to make (3) different clickable areas on a jpg image used as website. But, I'm using the following code to make it dynamically resize on window dimension change (css)

background: url('backgroundIMG.jpg') no-repeat center center fixed; 
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;

and so I need a solution that would move the clickable areas move/reposition accordingly, because otherwise I found an easy way to make clickable areas using Edge Animate, but I fear this only works for static backgrounds. Thanks!

Kizer Yakuza
  • 747
  • 2
  • 8
  • 13

1 Answers1

1

I'd make 3 divs with height and width as needed, but that have no content. Then I'd make each div do whatever I needed.

It's important to add that the height and width will be in '%' and not in 'px'. That makes them move according to the background image.

OriShuss
  • 269
  • 2
  • 3
  • 14
  • thanks a lot for the reply! =) Just one last question regarding the positioning of the divs, would you recommend absolute positioning or does that not make much difference in this case? – Kizer Yakuza Sep 05 '13 at 10:45
  • Yes, I would use absolute positioning to make sure they're all in the exact spot I need them to be. Sorry for the late reply, I was unavailable until now. – OriShuss Sep 07 '13 at 15:16
  • no worries, I was already busy with troubleshooting another technical glitch on one of the links, the page in question here will serve as homepage :) – Kizer Yakuza Sep 07 '13 at 19:15
  • with the background-size set to cover, it makes the aligning a bit off when height>width but regardless it's close enough and the areas will be invisible so no biggy. Thanks again! – Kizer Yakuza Sep 08 '13 at 00:26