css - CSS3 背景图像：居中和固定大小

Question

我的背景图像有问题。

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

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

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

提前非常感谢！

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/

Answer 2

你有没有尝试过：

background-position: center;
background-size: 2538px 559px;