Bild im Hintergrund und sollte verfügbaren Platz in HTML

Ich habe zwei Bilder, eines sollte in der Mitte der Box sein, und ein anderes Bild sollte alle verfügbaren Platz nehmen. Ich habe Code hier gemacht, aber Hintergrundbild besetzt alle verfügbaren Platz. Bitte überprüfen Sie den Code unten und lassen Sie mich wissen, wie zu lösen ist.Bild im Hintergrund und sollte verfügbaren Platz in HTML

<style> 
    .img1 { 
     position: relative; 
     top: 50%; 
     left: 50%; 
    } 
    .img2{ 
     background-image:url(html2.jpg); 
    } 
</style> 
<body> 

    <div id="mainDiv"> 
     <div id="innerDiv" style="padding: 10px"> 
      <div class="leftDiv"> 
       <span> 
        <img class="img1" src="html1.jpg" width="200" height="200" > 
        Place Fist image here. Place image in centre of parent with 200x200 </span> 
      </div> 
      <div class="rightDiv"> 
       <div class=img2">Place 2nd image as background and should take all space available</div> 
      </div> 
     </div> 
    </div>

Quelle

2016-05-09 Ravikanth

Waren Sie betrunken, als diese Frage machen wollen? Sind die DIVs auf getrennten Seiten? Haben sie ihre eigenen Breiten? –

Ihre img2-Klasse hat keine Öffnung "' class = img2 "' – jakob

Nicht lustig machen über Sie - ernsthafte Frage. Sind Sie Legastheniker diagnostiziert? Ihre Frage ist mit den Tippfehlern ein bisschen schwer zu folgen. Vielleicht reinigst du es ein wenig, damit mehr Leute deine Frage ernst nehmen. Prost. – Korgrue

Ich glaube, Sie „Höhe“ auf „img2“ sind vermisst, so dass Sie das img auf bg sehen können ... Denn wenn Sie nicht, img2 zeigt nur bg hinter dem Text. Lassen Sie eine Geige, aber nicht so sicher, was Sie

Fiddle

.img2{ 
height: 100vh; 
background-size: 100% 100%; 
    background-image:url(http://www.fonbruno.com/wp-content/uploads/2015/04/placeholder-1000x1000.jpg); 
}

Quelle

2016-05-09 16:10:03

Bild im Hintergrund und sollte verfügbaren Platz in HTML

Antwort

Verwandte Themen