无论浏览器的分辨率如何，都以 CSS-Background 为中心

Question

现在当您访问此链接时：http://rawgallery.us/user/login 背景被切断。无论浏览器窗口的分辨率如何，都应该是这样的图片：http://rawgallery.us/CarlisleBackDropWallRoom.png

我还在学习 CSS，所以我使用了这段代码，它被认为可以覆盖任何地方的背景，这很有效：

html { 
  background: url("CarlisleBackDropWallRoom.png") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

我的#page 是这样设置的：

#page {
  margin-left: auto;
  margin-right: auto;
  min-height:960px;
  min-width:960px;
  max-height:1200px;
  max-width:1200px;

}

html标签会覆盖页面标签吗？

例如，如果浏览器窗口为 500x700 或 1200x1500，谁能告诉我如何查看整个背景图像？

谢谢！

Answer 1

您可能更喜欢background-size:contain，它将背景图像放入其容器中，而不是试图同时覆盖容器的宽度和高度。

来自MDN docs：

["contain"] 指定背景图像应缩放为 尽可能大，同时确保其尺寸小于 或等于背景定位的对应尺寸 地区。

这是 CSS：

html { 
  background: url("/sites/default/files/imgs/CarlisleBackDropWallRoom.png") no-repeat center center fixed; 
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}

这是working example。

请注意browser compatibility of background-size。