填充背景圖像的2列填充100％的屏幕

Question

我是一名CSS初學者，我想創建一個包含2列（左側和右側）的登錄頁面，每列都有不同的背景圖像。

寬度：2張圖片應填滿屏幕的50％。 高度：屏幕的100％。

我認爲這將是簡單的，但無法弄清楚。請有人給我一些建議。

感謝...

Answer 1

您可以使用position:absolute;，與背景圖像：

HTML：

<div class="half-page left"></div> 
<div class="half-page right"></div> 

CSS：

.half-page { 
    position:absolute; 
    top:0; 
    bottom:0; 
    width:50%; 
    background-size:cover; 
} 
.left { 
    left:0; 
    background-image:url(www.url.com/image.png); 
} 
.right { 
    right:0; 
    background-image:url(www.url.com/image2.png); 
} 

Answer 2

Tr的Y本之一：

CSS

.wrap { 
    width: 100%; 
    overflow:auto; 
} 

.fleft { 
    float:left; 
    width: 50%; 
    background:url("http://res2.windows.microsoft.com/resbox/en/windows/main/01fdadc8-e0e2-46a2-aac8-50b174f40cca_4.jpg") no-repeat center center fixed; 
    height: 100%; 
} 



.fright { 
    float: right; 
    background:url("http://wallpapers55.com/wp-content/uploads/2013/08/Best-Beach-Wallpapers-Background-HD-Wallpaper.jpg") no-repeat center center fixed; 
    height: 100%; 
    width: 50%; 
} 

HTML

<div class="wrap"> 
    <div class="fleft">Hello World This is LEFT Content</div> 
    <div class="fright"> Hello World This is RIGHT Content</div> 
</div>