Html / CSS：图像占据屏幕的一半

Question

我想创建一个网页，其中大图像占据屏幕的一半，如下所示：

我如何用CSS做到这一点？

Answer 1

尝试这样的事情？ （2个div）

#leftHalf {
   background: url(bg-1.jpg);
   width: 50%;
   position: absolute;
   left: 0px;
   height: 100%;
}

#rightHalf {

   width: 50%;
   position: absolute;
   right: 0px;
   height: 100%;
}

干杯。

Answer 2

顶部的答案忘记了一些东西：

background-repeat: no-repeat;

因为您不想要两个图像，而只想要一个。最终代码：

#leftHalf {
   background: url(bg-1.jpg);
   background-repeat: no-repeat;
   width: 50%;
   position: absolute;
   left: 0px;
   height: 100%;
}