CSS 背景水平居中

Question

我有一张图片作为背景，具有以下 CSS 设置

#background {
  background-image: url('../img/bgimage.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  opacity: 0.8;
  filter:alpha(opacity=80);
  top:0;
}

我的目标是将背景居中（添加一点不透明度），但它的开头仍然在页面顶部。现在当用户的显示器太大时，它看起来像这样

可以看到图像不是从顶部开始的。（灰色应该是稍后的导航栏，但在这个问题中并不有趣）。蓝色是背景的一部分，白色显然只是一个通配符，直到背景开始保持中心可用。如何使图像水平居中以使其仍从页面顶部开始，或者如何调整图像大小以适合用户显示器大小？

Answer 1

您可以像 here 解释的那样使用 background-size: cover;。

Answer 2

简单的，添加这些：

background-position: center center;
background-size: cover;

更多信息请见 Perfect Full Page Background Image。

Answer 3

要让背景始终覆盖其容器的表面，请使用

background-size: cover;

CSS 背景水平居中

CSS Background horizontal centering

html

css

center