填充背景图像的2列填充100%的屏幕
问题描述:
我是一名CSS初学者,我想创建一个包含2列(左侧和右侧)的登录页面,每列都有不同的背景图像。填充背景图像的2列填充100%的屏幕
宽度:2张图片应填满屏幕的50%。 高度:屏幕的100%。
我认为这将是简单的,但无法弄清楚。请有人给我一些建议。
感谢...
答
您可以使用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);
}
+0
这工作很好。非常感谢! –
答
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>
您可以发布与相关的代码你写一个片段? – silviagreen
到目前为止你已经尝试了什么? –