Convert Image to background of Content

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开发者_StackOverflow 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;
 }

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/

<script type="text/javascript">
$(document).ready(function(){
    var img= $("#backgroundDiv").html();
    $(".ContentDiv").mouseover(
    function(){
        $("#backgroundDiv").html(img+'<div class="addedContent">'+$(this).find(".Content").html()+'</div>');
        /* Use the following line if you want to scale the "background" image to the content */
            $("#backgroundDiv").css('height',$(this).find(".Content").height());
    });
});
</script>
<style type='text/css'>
#backgroundDiv{
    position:relative;
    height:auto;
    width:auto;
}
#backgroundimg{
    width:100%;
    height:100%;
}
.addedContent{
    position:absolute;
    top:0;
    left:0;
    z-index:999;
}
</style>

If you weren't using a terrible browser, css3 could lend you a hand.

background-size: [ [ <length> | <percentage> | auto ]{1,2} || round ] 

http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm