如何在身体背景图像上设置div

时间:2014-05-13 19:42:51

标签: css css3 background-image overlay

my present design**i have designed a website like this. ** 它对我的屏幕分辨率工作正常。底部div是背景图像的一半,距离背景图像的一半。我的问题是当我为更高分辨率的屏幕测试它时看起来不一样。图像向下移动。这是我的css

body
{
    background: #ffffff url(../images/11.jpg) no-repeat center top 0%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-size: 100% 75%;
    font-family: Arial;
}

底部div css

.banner {
width: 100%;
min-height: 300px;
height: 100%;
background-color: #ffffff;
}

如何为所有屏幕尺寸设置相同的内容。

2 个答案:

答案 0 :(得分:0)

你说图像向下移动,你的意思是当你滚动图像移动但你想要它静止吗?如果是这样,您可以将background-attachment:fixed;添加到body的CSS。

答案 1 :(得分:0)

这是因为图像的比例不会让图像适合整个屏幕。

设置

body {
    ...
    width : 100%;
    height : 100%;
}