背景图像始终居中[关闭]答案

【问题标题】：Background image always centered [closed]背景图像始终居中[关闭]
【发布时间】：2011-03-17 08:39:14
【问题描述】：

我创建了一个网站，但在强制背景图像始终居中时遇到问题。当网站最大化时它看起来很棒，但是当我将窗口分辨率变小时，背景会被推到左边并且内容会溢出到右边。如果无论窗口大小如何，我都可以强制背景图像始终居中，这将得到解决。我将图像居中的 CSS 如下所示

    body {  background: #EDEDED url(../images/bg-y.png) repeat-y scroll 50% 0;
                font-size:12px; 
                font-family:'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif;
                color:#000000; }

我有一个活生生的例子，可以在http://www.theprizeshark.com/ 看到

要得到我所说的错误，最小化窗口，所以你必须向右滚动，你会看到内容全部溢出背景图像。谢谢。

【问题讨论】：

一张“更大的图片”可能有助于从<html> 到</html> 的可复制示例的风味，其中包含公共领域的图像。
奇怪，我预计会出现问题，但它在 Chrome 上完美运行。

标签： html css

【解决方案1】：

我认为您需要做的就是将百分比 50% 更改为 center

【讨论】：

是的。您可以使用“背景：#EDEDED url(../images/bg-y.png) repeat-y scroll center top;”如果您想从属性中的数字中删除任何歧义（我知道我总是混淆是 X 轴还是 Y 轴先行）。
center 表示50% 根据CSS2.1 spec on background-position center (is) Equivalent to '50%' for the horizontal position if it is not otherwise given, or '50%' for the vertical position if it is.
请在theprizeshark.com查看实时版本，看看它是什么样子的。

【解决方案2】：

w3schools 网站充满了有用的信息。

http://www.w3schools.com/css/pr_background-position.asp

body{
    background: #EDEDED url(../images/bg-y.png) repeat-y scroll center top;
    font-size:12px; 
    font-family:'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif;
    color:#000000;
}

【讨论】：

仅供参考 w3schools 与 w3.org（W3C）无关
@Felipe Alsacreations 总的来说，w3.org 和 w3schools.com 都充满了有用的信息。 :) 但是我已经编辑了我的答案，现在我认为还可以。 ;)
+1 w3schools 欺骗我，让我认为多年来一直存在关联。