Question

请参阅http://www.squarespace.com及其启动页面背景图片。无论什么宽高比，窗口调整大小到图像都没有平铺。我知道图像尺寸必须很大，但我使用的图像是6百万像素，而当我将窗口调整为高而窄以复制iPhone时，我仍然使用图像。

squarespace.com使用哪些背景图片CSS设置用于他们的初始图像？

我目前的设置：

position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background-position:center center;
background-size:100% auto;
background-image:url(../images/zzz.jpg);

Answer 1

使用background-size: cover将拉伸背景图像以适应宽度和高度，无论宽高比如何。

Answer 2

更改设置如下

background-image: url('../images/zzz.jpg');
position: absolute;
width: 100%;
height: 100%;
left: 0%;
top: 0%;

如果您的网页有滚动内容，那么也请包含以下内容。

background-attachment: fixed;
background-size: 100% 100%;
background-repeat: no-repeat;

但是你仍然有可能让背景图像变得紧张。为避免这种情况，您必须使用javascript根据屏幕分辨率选择不同尺寸的图像，如http://www.squarespace.com中所示。

CSS：所有宽高比的背景图像拉伸？

2 个答案: