How To Make Part of a Background Image A Clickable Link

This tutorial shows you how to make a specific area on a background image clickable.

Here’s a very basic example showing you the red box which is a clickable link.

You can also add hyperlinked text or another image in the box.

There’s 2 parts to this solution:

1. The HTML which we’ll hook in using PHP code from the child themes functions file.
2. The CSS to add your background image and position your link on the image.

Step 1. HTML