Question

所以我有一张图片（w：1638px h：2048px），我使用background-image函数将其设置为我的背景，然后尝试赋予它width: 100%;和height: 100%;属性。它水平拉伸屏幕上的图像，然后它让我向下滚动剩下的部分。我不想滚动。有没有办法裁剪/定位纵向图像以使其成比例并将屏幕正确填充为背景？我应该在Photoshop中将它设置为不同的尺寸吗？

我在html中有一个常规<div class="bgimage></div>，而css看起来像这样：

.bgimage {
height: 100%;
width: 100%;
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-size: cover;
position: absolute;

}

我有什么遗漏或没有正确行事吗？我正在使用Dreamweaver CS6并在最新版本的Firefox / Safari中查看它。

谢谢。

Answer 1

如果您要为整个页面设置背景，请改为设置body元素的样式：

body {
    background-image: url(images/background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

http://jsbin.com/rugom/2

背景大小调整屏幕没有图像失真

1 个答案: