背景中的图像,应该在HTML中占用可用空间

时间:2016-05-09 15:21:58

标签: html css html5

我有两张图片,一张应位于包装盒的中央,另一张图片应占用所有可用空间。我在这里完成了代码,但是背景图像占据了所有可用的地方。请检查下面的代码,让我知道如何解决。

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

1 个答案:

答案 0 :(得分:0)

我认为你错过了&#34;身高&#34; on&#34; img2&#34;所以你可以在bg上看到img ...如果你不这样做,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);
 }