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

How To Make Full Page Background Image Without Resizing Or Cropping

本文关键字：情况下 图像 背景 裁剪 调整      更新时间：2023-10-15

我需要的是以下网站的功能，但它不是幻灯片，它只是一个褪色的背景图像：

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/

任何帮助都将不胜感激。

如果您需要使用background属性并且从不希望裁剪图像，则应该使用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;
}

基于上述问题的答案：

#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
}

我认为您需要以下代码：

body
{
 background: url(image/background.jpg);
 background-attachment: fixed;
 background-size: cover;
}
相关文章：