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

-3

我是一名CSS初学者，我想创建一个包含2列（左侧和右侧）的登录页面，每列都有不同的背景图像。填充背景图像的2列填充100％的屏幕

宽度：2张图片应填满屏幕的50％。高度：屏幕的100％。

我认为这将是简单的，但无法弄清楚。请有人给我一些建议。

感谢...

来源

2016-03-03 Bjorn Hoeterickx

您可以发布与相关的代码你写一个片段？ – silviagreen

到目前为止你已经尝试了什么？ –

您可以使用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); 
}

来源

2016-03-03 11:00:00 rblarsen

这工作很好。非常感谢！ –

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>

来源

2016-03-03 11:17:23 Junu

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

回答

相关问题