Make a box clickable, or a background image in a box clickable


hello! my landing page is not live so nothing to test. I’ve found the best way to get hi res images to appear nicely on mobile is to make a Box element and set the image as the background image as the box. however in some cases I also want that image to link out somewhere.

how can i achieve this? can i add a link to the box, or to the image, or some variation?


12 replies

The way i have done this in the past (really crude) - put a button over the image, full opacity, remove text (make button invisible).

There may be a better way…

Another thought - i wonder if you could get the same effect (high res images) by setting as a background image of a button (use a button in place of box) - should / might work!?

Userlevel 6
Badge +1

@sgro28 although the “box method” works well I’m still a fan of 2x png retna style. This works really well. Basically I make sure all my images re png’s and a minimum of 2x larger than they need to be. Then I scale them down when I put them on my page.

As for linking a box, I’m pretty sure it can be done in JS. Do any @Unbounce-Experts know a way?

Userlevel 6
Badge +4

I would suggest the same as @Alex_Scovell 😀 Straight forward and easy.

@Alex_Scovell hi all! i am trying to do this and it won’t scale the image into the button size, i can’t uncheck “fit button size to image”. one time i got that box to uncheck and the image stayed in place instead of scaling to the button size…any ideas there?

ahh yes - just tried it - doesn’t work!

so go with the other option - put image in box. put button on top of box and set background to solid colour, opacity 0, inner highlight off, border none and delete the text - so it becomes invisible.

place over your image and obviously make sure it is in front not behind the box image.

@digibomb how do you scale down? this is what the box effectively does - is there another way?

Userlevel 7
Badge +3

The button trick works.

However, If you want to do it through JS and a bit of CSS, you can see a working example here and grab the necessary scripts here.

My JS/CSS example saves you the trouble of setting a button over the box but you need to adjust the JS so it’s really a matter of personal preference.

Best,
Hristian

Hi, do you mean overlaying a button onto a box?

when trying to set an image as the background of the box, there are problems with the image scaling properly.

Userlevel 6
Badge +1

@Alex_Scovell Scaling down is not an issue. The image is already 2x bigger. So when you make the image smaller the pixel count is still there. I have never had an issue with this method.

Badge

This script doesn’t working

Badge

Reply