CSS：全尺寸背景图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14059429/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Full Size background image
提问by Himanshu Yadav
Trying to get full size background image with:
尝试使用以下方法获取全尺寸背景图像：
html {
height: 100%;
background:url('../img/bg.jpg') no-repeat center center fixed;
background-size: cover;
}
It's showing the background image with correct width but height gets stretched. I tried various options like
它以正确的宽度显示背景图像，但高度被拉伸。我尝试了各种选择，例如
html {
background:url('../img/bg.jpg') no-repeat center center fixed;
background-size: 100% auto;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
}
}
removing height: 100%
去除 height: 100%
but none of them worked.
但他们都没有工作。
回答by Gareth Cornish
Your screen is obviously a different shape to your image. This is not uncommon, and you should always cater to this case even if your screen is the same shape (aspect ratio), because other people's screens will not always be. To deal with this, you have only one of three options:
您的屏幕显然与您的图像形状不同。这种情况并不少见，即使您的屏幕形状（纵横比）相同，您也应该始终迎合这种情况，因为其他人的屏幕并不总是如此。要解决这个问题，您只有以下三种选择之一：
- You can choose to completely cover the screen with your image, but not distort the image. In this case, you will need to cope with the fact that edges of your image will be cut off. For this case, use:
background-size: cover - You can choose to make sure the entire image is visible, and not distorted. In this case, you'll need to cop with the fact that some of the background will not be covered by your image. The best way to deal with this is to give the page a solid background, and design your image to fade into the solid (although this is not always possible). For this case, use:
background-size: contain - You can choose to cover the entire screen with your background, and distort it to fit. For this case, use:
background-size: 100% 100%
- 您可以选择用图像完全覆盖屏幕，但不要扭曲图像。在这种情况下，您需要处理图像边缘将被切断的事实。对于这种情况，请使用：
background-size: cover - 您可以选择确保整个图像都是可见的，而不是失真的。在这种情况下，您需要解决一些背景不会被您的图像覆盖的事实。解决此问题的最佳方法是为页面提供纯色背景，并将图像设计为淡入纯色（尽管这并不总是可行）。对于这种情况，请使用：
background-size: contain - 你可以选择用你的背景覆盖整个屏幕，并扭曲它以适应。对于这种情况，请使用：
background-size: 100% 100%
回答by vGichar
try with contain instead of cover and then center it:
尝试使用包含而不是封面，然后将其居中：
background-size: contain;
background-position: center;
回答by Behnam Mohammadi
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
回答by rentageekmom
A better solution might be to use a lightweight jQuery plugin to dynamically size the background to the browser site. One I really like is backstretch.js. They're incredibly simple to implement.
更好的解决方案可能是使用轻量级 jQuery 插件来动态调整浏览器站点的背景大小。我真正喜欢的是 backstretch.js。它们实施起来非常简单。
回答by Abed Putra
I have same problem I use this CSS on body
我在使用这个 CSS 时遇到了同样的问题 body
background: url(image.jpg);
background-color: rgba(0, 0, 0, 0);
background-position-x: 0%;
background-position-y: 0%;
background-size: auto auto;
background-color: #0a769d;
height: 100%;
min-height: 100%;
max-height: 100%;
width: 100%;
background-size: 100% 100%;
background-position: center;
max-width: 100%;
min-width: 100%;
top: 0;
left: 0;
padding: 0;
margin: 0;
回答by squashriddle
You should use the body as the selector and not html, this will cause issues with your markup. Your code is below:
您应该使用正文作为选择器而不是 html，这会导致您的标记出现问题。您的代码如下：
html {
height: 100%;
background:url('../img/bg.jpg') no-repeat center center fixed;
background-size: cover;
}
I would try something like:
我会尝试类似的东西：
body {
background:url('../img/bg.jpg') no-repeat 50% 0 fixed;
margin: 0 auto;
}
You should not have to specify the dimensions for the image.
您不必指定图像的尺寸。
