CODEWITHSUNDEEP
htmlcssimagehyperlink
Will Fisher
Will Fisher

Reputation: 413

Image Link Not Working

In my webpage I have set up an image link/anchor using the following code:

<div class="bg_1">
        <div class="Absolute-Center">
            <span style="font-size: 50px; color: aqua">in short.</span><br />
            LIVE LIFE AT YOUR OWN PACE.<br /><br /><br /><br /><br /><br /><br />
            <a href="#home1"><img src="images/scrolldown.png" width="50" height="50" border="0" /></a>
        </div>
    </div>
    <div style="height: 100vh; background-color: black;" >
        <a name="home1"></a>
    </div>

However when I run my page this image does not appear to be clickable, nor does it take you anywhere when you click. Any ideas? If it makes any difference the image I am using is mostly transparent.
Edit:
I have narrowed the problem down to being caused by z-index. The CSS code for "bg__1" is as follows:

.bg_1 {
    height: 100vh;
    position: relative;
    z-index: -1;
    background-position: center center;
    background-size: cover;
    background-image: url(http://31.media.tumblr.com/2c3a72acc53b1a78ef3b6c4986604cd2/tumblr_ni0jt8sKlY1sr6759o1_500.gif);
}

Removing the z-index line fixes the problem however I need the z-index for my layout.

Upvotes: 0

Views: 5226

Answers (3)

user10917078
user10917078

Reputation:

It might had happen because of the body element covering your link. Just decrease z-index property of the body element.

Upvotes: 2

Will Fisher
Will Fisher

Reputation: 413

I have found my error. Image links become un-responsive if they are contained in a div or block that has a negative z-index. So instead of making it negative to render below default. Keep its container at default and raise the z-index of those you want it to render behind.

Upvotes: 1

pisamce
pisamce

Reputation: 533

Without seeing the layout of the page it is difficult to find the fix. However, you have few possibilities:

  • Change your page layout
  • Remove z-index: -1 from css styles
  • Find the element which is overlapping your image and add pointer-events: none to it's style. Then, click events will pass through to image.
  • Change z-index of element which is overlapping the image, and give it lower z-index value

Upvotes: 0

Related Questions