尽管屏幕分辨率如何，如何强制背景图片始终以屏幕为中心？

Question

是否可以让我的背景图片的中心始终位于屏幕的中央，并且可以裁掉边以补偿分辨率？我目前正在使用背景图像：封面来裁剪边，而不考虑中间，但我希望我的图片中心的内容始终位于页面的中心。大多数情况下，我想这样做，以便移动看起来不错，但这样做也有助于使其更兼容设备。

desktop

上的内容

mobile上的样子。 （无视CF Lumen的色彩）

我希望女孩在所有设备上都位于屏幕中央。

Answer 1

您可以使用css属性background-position: center;

  

为了适应所有屏幕尺寸的背景，你必须这样做   保持图像的大小为background-size:100% 100%;或最佳   适合你。并停止重复使用后台background-repeat:no-repeat

上述设置会使图像设备与设备的显示不同，即在某些设备中图像看起来非常拉伸 所以Media Query将是一个理想的解决方案。

Answer 2

如果您使用的是Bootstrap，那么您只需将CSS类“img-responsive”应用于背景图像。