Question

到目前为止，我的新网站背景已经到了，现在我卡住了，如果缩小浏览器窗口，背景图片的高度会低于100％。

我希望它保持全尺寸，如果你缩小它，我不希望高度不低于100％（显示白色）

此处代码http://www.bestlincs.co.uk/new/

Answer 1

您可以使用以下代码：

html or .classname { 
  background: url(ImageUrlhere) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
}

Answer 2

使用：

body {margin: 0; padding: 0}

并将background-size属性设置为cover：http://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 3

在你的代码中，你还没有为图像定义一个高度给它100％的高度它是有效的我在我的浏览器中尝试并且工作正常

Answer 4

解决方案取决于您的需求 - 一种方法是在css中指定min-width和min-height属性而不是纯宽度。因为它会扩展到它需要的任何大小，然后将它固定在左上角（请注意，右侧的任何“溢出”都将被切断）。

来源： http://css-tricks.com/perfect-full-page-background-image/

您的问题的详细说明：如果将图像设置为其容器的100％宽度并且未指定高度，则在填充容器之前，它将始终被拉伸，同时缩放高度以保持图像的纵横比。

例如：拍摄200px x 100px大的图像，将其放入300px宽的容器中，其宽度设置为100％。它将沿着两个维度按300/200 = 1.5的比例缩放，从而产生尺寸为300px x 150px的图像。如果您的图像具有与用户屏幕不同的宽高比，会发生什么？它将简单地拉伸到全宽，然后将其余部分留空。设置高度也会引入更多问题，因为图像会变形。

Answer 5

HTML：

body { 
  margin:0;
  background: url(image.gif) no-repeat; 
  padding: 0;
}

然后背景大小为100％

背景图像尺寸不会保持100％的高度

5 个答案: