イメージはバックグラウンドで、HTMLの空き容量が必要です

2つのイメージがあり、1つはボックスの中央に、もう1つのイメージはすべての空き領域を占める必要があります。私はここでコードを行っていますが、背景イメージはすべての利用可能な場所を占めています。以下のコードをチェックし、解決方法を教えてください。イメージはバックグラウンドで、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>

出典

2016-05-09 Ravikanth

作りたいものをそれほどわからないあなたは酔っていましたか？ DIVは別々の側にありますか？彼らは自分の幅を持っていますか？ –

img2クラスに "class = img2" ' – jakob

がありません。あなたを楽しませることはありません - 深刻な質問です。あなたは失読症で診断されていますか？あなたの質問は、タイプミスに従うのは少し難しいです。たぶんあなたの質問を真剣に受け止める人が増えるのでちょっときれいにしてください。乾杯。 – Korgrue

私はあなたがBGにIMGを見ることができるようにあなたが「IMG2」の「高さ」欠けていると思う...原因あなたはいけない場合、IMG2はテキストのみの後ろBGが表示されます。この質問をしたときにフィドルあなたを残していますが

Fiddle

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

出典

2016-05-09 16:10:03

イメージはバックグラウンドで、HTMLの空き容量が必要です

答えて

関連する問題