Bild in den Hintergrund des Inhalts konvertieren

Question

Ich stoße auf ein Problem und versuche es auf die einzige Art zu lösen, die mir in den Sinn kommt. Das Problem ist, dass ich versuche, Inhalte zu nehmen, die an eine Bildschaltfläche angehängt sind, aber der Inhalt ist ausgeblendet und zeigt ihn neben der Schaltfläche mit einem Hintergrundbild, wenn der Benutzer darüber fährt. Hier ist, wenn das Problem kommt, ich habe das Hintergrundbild derzeit nur als Bild (img-Tag), also kann ich es durch Anpassen der Höhe/Breite strecken. Ich möchte in der Lage, den Inhalt auf der Oberseite des Bildes zu legen: Zum Beispiel:

<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 mit jquery Ich benutze Mißachtung einfache Syntaxfehler

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

Die oben die intented ist, die addieren ist all den Inhalt nach dem div img, was ist, was ich bin, möchte ich in der Lage sein, den Hintergrund img Tag den tatsächlichen Hintergrund für den Inhalt zu machen. Wenn ich versuche, das Hintergrundbild in CSS auf die URL für das div zu setzen. Das Bild macht den Hintergrund nicht größer genug. Denken Sie daran, ich bin unter dh 6 für einige Fälle aber nur so weit wie dh 8 für die meisten Fälle.

Also, was ich habe versucht, wurde mit CSS den Z-Index für das Image und den Inhalt als so zu ändern, aber nicht funktioniert:

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

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

Answer 1

würde ich einen anderen Ansatz verwenden. Struktur Ihre Inhalte wie folgt aus:

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

So könnte man ohne JS arbeiten, wenn ich die Frage verstanden ... ein Beispiel Siehe hier: http://jsfiddle.net/meo/h64w4/4/

Answer 2

Wenn Sie nicht waren eine schreckliche Browser, css3 könnte dir helfen.

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

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

Answer 3

<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>