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

我的目标是将背景居中（透明度略微增加），但仍然从页面顶部开始。现在，当用户的显示器太大时，它看起来像这样： 可以看到图像不是从顶部开始的。（灰色应该是后面的导航栏，在这个问题中并不重要）。蓝色是背景的一部分，白色显然只是一个通配符，直到背景开始，使中心可用。如何水平居中图片，使其仍然从页面顶部开始？或者如何调整图像的大小，使其适合用户的显示器尺寸？

- BoJack Horseman

---

背景尺寸: 覆盖; - Jonas Grumann

@JonasGrumann 现在这太容易了，请把它变成答案，这样我就可以接受它:D - BoJack Horseman

Answer 1

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

- Can

Answer 2

简单的操作，只需添加以下内容：

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

更多信息请访问完美的全屏背景图片。

- Praveen Kumar Purushothaman

Answer 3

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

background-size: cover;

- Jonas Grumann