2 列背景图像填充 100% 的屏幕答案

【问题标题】：2 columns with background image filling 100% of the screen2 列背景图像填充 100% 的屏幕
【发布时间】：2016-03-03 10:56:25
【问题描述】：

我是 CSS 初学者，我想创建一个包含 2 列（左和右）的登录页面，每列都有不同的背景图片。

宽度：2 张图片应占屏幕的 50%。高度：屏幕的 100%。

我认为这很简单，但无法弄清楚。谁能给我一些建议。

谢谢...

【问题讨论】：

你能用你写的相关代码发布一个sn-p吗？
到目前为止你尝试了什么？

标签： css background-image multiple-columns

【解决方案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);
}

【讨论】：

【解决方案2】：

试试这个：

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>

【讨论】：