I have a fixed background image underneath some links with attached images. As long as these linked images are not on top of the background they work fine but once they scroll on top of the image, the cursor only picks up the background image and no longer the linked images.

This is the css I have for the background image -

.background {
    /*This is the code for the transparent image on the index page. Position set to absolute for IE, later set to fixed for Firefox*/
    ;
    background-color: #ffffff;
    background-image: url(../Images/isidorescornerlg.jpg);
    background-repeat: no-repeat;
    background-position: left;
    opacity: 0.2;
    filter: alpha (opacity=20);
    position: absolute;
    width: 30%;
    height: 50%;
    top:20%;
    left:16%;
}

body>.maincontent>.background {
    position: fixed;
}

This is the css for the linked image-

.maincontent {
    width:80%;
    top:12%;
    left:18%;
    margin-left:18%;
    margin-top:12%;
    z-index:1;
}

.smimga {
    float: left;
    padding:1%;
    border:none;
}

And this is the html I'm using -
<div class="maincontent">
<div class="background"></div>[list]
  <li>
    <a href="../Isidores_Corner/BYS/BYS.html"><img
 class="smimga" alt="small button"
 src="../Isidores_Corner/Images/sbutton.gif" /></a>
  </li>
</ul>
</div>

Any suggestions?

I guess:D

.background {
z-index: 1;
}
.maincontent {
z-index: {2 or 3};
}

<div class="background"><div class="maincontent">[list]
  <li>
    <a href="../Isidores_Corner/BYS/BYS.html"><img
 class="smimga" alt="small button"
 src="../Isidores_Corner/Images/sbutton.gif" /></a>
  </li>
</ul>
</div></div>

When I tried placing the "mainnav" into the "background" div, it gave everything the opacity of the background image. I also tried placing the "background" div before the "mainnav" which made the links on my button .pngs work like I wanted but ruined the opacity of the .gifs so that they looked like buttons with white blocks around them. I tried with .pngs instead, but had the same problem. I may just have to move the background image away from the buttons to get this to work right.

This is just a short message to say that I finally got it working. What I ended up doing was removing the background div and making the image a non-repeating background in the maincontent div and then using a graphics program to change the image into a .png format and then saving the image with the desired opacity. Now it works fine in Firefox and I think that there is a Java Script fix to get it working in IE.