Question

我需要的是以下网站的确切内容，但它不是幻灯片，它只是一个褪色的背景图片：

http://www.stevenharrisarchitects.com/

图像的宽度为100％，高度为100％，因此不会发生裁剪，这正是我想要的。我已经设法使用以下代码轻松完成此部分：

#bg-stat {
background: url('images/LANDING_PAGE.jpg') no-repeat center center fixed;
height: 100%;
background-size: 100% 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: center;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/LANDING_PAGE.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/LANDING_PAGE.jpg', sizingMethod='scale')";
}

我制作了背景尺寸：100％100％;

它工作正常，但剩下的唯一问题是我的客户端不希望图像根据窗口的大小调整大小，而是应该像我上面提到的网站一样（尝试调整窗口和你的大小）会看到我的意思）。

我不希望我的背景图片重新调整到窗口宽度和高度的100％，我希望它的行为就像上面我分享的链接一样。

也是指向我网站的链接：

http://leydenlewis.com/

非常感谢任何帮助。

Answer 1

如果您需要使用背景属性并且永远不希望裁剪图像，则应使用background-size :contain;

div.big_background{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: url('http://placekitten.com/g/1200/800') no-repeat center top;
    background-size :contain;
}

Answer 2

基于上述问题的答案：

#bg-stat {
  width: 100%;
  height: 100%;
  background: url('images/LANDING_PAGE.jpg') no-repeat scroll 0 0 transparent;
  background-size: 100% auto;
}

根据反馈回答：

CSS：

#bg-stat {
  width: 100%;
  height: 100%;
}

#bg-image {
  background: url("images/LANDING_PAGE.jpg") no-repeat scroll 0 0 transparent;
  height: 100%;
  width: 100%
  min-width: 1140px; // Based on img dimensions or arbitrary 
  max-height: 735px; // Based on img dimensions or arbitrary
}

Answer 3

我认为您需要以下代码：

body
{
 background: url(image/background.jpg);
 background-attachment: fixed;
 background-size: cover;
}

如何在不调整大小或裁剪的情况下制作整页背景图像

3 个答案: