Question

I am running into a problem and I trying to solve it in the only way that comes to mind. The problem is I am trying to take content that is attached to a image button, but the content is hidden and show it next to the button with a background image when the user hovers over it. Here is when the problem comes in, I have the background image currently as just an image(img tag), so I can stretch it by adjusting the height/width. I want to be able to lay the content on top of that image: For example:

<div class="ContentDiv"><img id="ContentButton">
<ul class="Content"><li>this is first</li><li> This is second</li>
<li>This is third content part</li></ul></div>
<div class="ContentDiv"><img id="ContentButton2">
<ul class="Content"><li>this is first</li><li> This is second</li>
<li>This is third content part</li></ul></div>

<div id="backgroundDiv"><img id="backgroundimg" src="backgroundI_Want_To_Use"></div>

so with jquery I use disregard simple syntax errors

var mem;
var img= $("#backgroundDiv").html();
$(".ContentDiv").hover(
  function(){
    mem=$(this).find(".Content").html();
    $("#backgroundDiv").html(img+mem);
  }function(){
});

The above does the intented, which is add all the content after the div img, which is what I’m stumped at, I want to be able to make the background img tag the actual background for the content. If I try to set the background-image in css to the url for the div. The image doesn’t make the background as larger enough. Keep in mind I am under ie 6 for some cases but only as far as ie 8 for most cases.

So what I have tried was using css to change the z-index for the image and the content as so: but doesn’t work:

#backgroundimg{
  z-index:-100;
 position:absolute;

}
.Content{
 z-index:100;
 position:relative;
 }

Answer 1

i would use a different approach.
Structure your content like this:

+ DIV (position static / relative)
  + IMG (position relative)
  + DIV (position absolute)
    + "contents"

So you could work without any JS if i understood the question… See an example here:
http://jsfiddle.net/meo/h64w4/4/