CSS3 背景图片 : centered and fixed size

Question

我的背景图片有问题。

我有一个大小为 2538 x 559 像素的图像，无论窗口分辨率或大小如何，它都应该居中。背景图像应该有一个固定的大小，它不能缩放。图片中间是一个特定位置的文本表单，这就是图片不能缩放的原因。

如果我们的分辨率很小或者窗口变小了，中心应该仍然可见并且图像应该被左右切割。

我尝试了很多我浏览和发现的东西，但没有任何帮助。你能帮帮我吗？

提前非常感谢!

Answer 1

您必须将 background-position 设置为百分比:

body
{
    height: 100%;
    width: 100%;
    background: url('path/to/file.png') no-repeat;
    background-position: 50% 50%;
    background-size: 1920px 1200px;
}

这确保它会占用容器宽度的百分比并始终将其显示在中心，切割图像的左侧和右侧。

要使背景图像始终保持相同大小，您应该使用 background-size: 属性。

请注意，这是一个 CSS3 属性，IE<9 将不支持它。

http://jsfiddle.net/Kyle_Sevenoaks/QY5NQ/