html - 无论浏览器的分辨率如何，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标签是否覆盖了page标签？

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

谢谢!

Answer 1

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

来自MDN docs :

["contain"] specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.

这是 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 .