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：

[“contains”]指定应缩放背景图像尽可能大，同时确保其尺寸小于或等于背景定位的相应尺寸区域。

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

CSS-Background专注于浏览器的分辨率

1 个答案: