Foreground content not coding properly with CSS or HTML

Greetings,

I recently discovered how to apply a full resolution size background image with CSS2.1 and apply opacity to it (optional, of course). However, this has now affected all my foreground content including my cursor. I copied a menu design from another page of mine and pasted it on the full background page file to test how it looked. The menu resulted fine but none of the links work, nor hover effects, text color changes, etc. Also, any single link is not working either. (blue link default text appears but link is not clickable/active). I had applied opacity to it so the image would not obstruct the foreground content and opacity worked great! But when the foreground content encountered these issues I removed opacity and the issues remained.

Does anyone know why this is can can please help?

Thank you! :thumbsup:

ummmm how can anyone possibly help you when you dont provide any code or a link to your site??

My apologies for not posting my code. I know this makes people have to visualize what I'm coding in order to try and help and that is time consuming and almost useless.

Below is the CSS followed by the HTML:

img.bckg
{
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}

@media screen and (max-width: 1024px)
{
{
left: 50%; /*property not needed. Does nothing*/
margin-left: -12px; /*property not needed. Does nothing*/
}
}


<img class="bckg" src="scifi21.jpg" style="filter:
alpha(opacity=60);">


Thank you, all!

Put all of your content in a div with position:relative; with a z-index of 1, leave your image outside of your div and give it a z-index of 0. FYI the opacity style you used there is IE only.