Inactive anchor tags on overlaying them on background image with opacity

HTML & CSS
1

I wanted to overlay the navigation bar on the background image by setting the opacity of the image. But after doing that, the links become inactive.

.home
{
	opacity:0.7;
	position:absolute;
	
}

div.navigation
{
	
	background-color:#151733;
	color:white;
	height:6.5em;
	width:100%;
	padding-top:20px;
	position:fixed;
	float:top;
}

I found that the “position:fixed” for the navigation bar is the reason for this.
Can I bring this effect without affecting the links?
Thank You!

2

I think we will also need to see your markup.

3

My html contains only of anchor tags:

<div class="navigation">
	<a class="home_link" href="file:///F:/2nd%20yr/project/svnit_bucket.html">Home</a>
	<a class="papers_link" href="http://www.w3schools.com/">Question-papers</a>
</div>
<img class="home"src="13244821_1014735255283358_5243225901672284565_n.jpg" height="600px" width="100%">
4

In the HTML
height="600px"
should be
height="600"
I don’t know if this is what is causing the problem but it’s a start.

5

Yeah, thank you for the suggestion, but the problem still lingers.

6

The problem is, your “background” image is not a background at all. It’s an image placed on top of your nav, which is why the nav is inaccessible.
To have an actual background, use the css background property.

3 Likes
7

Hi,

It’s still not clear what you are trying to do exactly and the html and css don’t really make senae in terms of a usable effect.

If the navigation is fixed positioned then an absolute element will not overlay it all the time because the absolute element will scroll away with content while a fixed element stays fixed in place. Unless of course this was the effect you wanted?

If you want the fixed nav to stay on top of the image then you should apply the image as a background to the nav instead (or use the body element and background-attachment fixed).

Suffice to say that if you simply overlay an image (or indeed anything) on top of something else then the element underneath cannot be interacted with in a cross browser way. You can use pointer-events:none to allow a click through on the top element but this does not work in IE browsers.

When you stack positioned elements on top of each other then their stack level is controlled with z-index so you can layer elements as required but the element on top will always block the elements below from receiving any interaction (such as links or hover working).

We really need to see what effect you are trying to make or a link to the site so that we can give more specific help. There are a number of different scenarios that this could lead to so its not possible to give a simple answer until we see the whole picture.:slight_smile:

4 Likes
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.