在屏幕上居中网站背景？答案

【问题标题】：Center website background on the screen?在屏幕上居中网站背景？
【发布时间】：2011-07-24 12:47:37
【问题描述】：

我在很多网站上都看到过这个技巧，我想将它用于我自己的项目。
我有一张非常大的图片background.jpg，只是为了适应任何屏幕尺寸。
我希望将背景图像置于访问者窗口的中心。
我的意思是，在滚动窗口内容时会移动，但背景会保持原位 - 垂直和水平居中。

顺便说一句，大多数观众都会有旧的蹩脚电脑，所以最好不要闪烁，如果它是 JS。

【问题讨论】：

标签： javascript html css background-position

【解决方案1】：

body
{
    background-image: url('background.jpg');
    background-repeat: no-repeat; /* you know... don't repeat... */
    background-position: center center; /*center the background */
    background-attachment: fixed; /*don't scroll with content */
}

【讨论】：

【解决方案2】：

将您的图像放在身体背景上：

body{ background-image:url('your/image/url'); }

并在正文中放置一个 div：

<body><div class="div-body">{your site's contents}</div></body>

并像这样创建一个 css 选择器：

.div-body{
   overflow:scroll;
   width: 100%;
   height: 100%;
   display: block;
   float: left;
}

【讨论】：

【解决方案3】：

试试这个小提琴的内容：http://jsfiddle.net/maniator/3RRYe/3/
demo
看看是否适合你^_^

【讨论】：

这应该只是中心，而不是中心顶部 - 他也想要垂直居中。
body { background: url(background.jpg) no-repeat center top; } 不行
我希望以屏幕为中心而不是页面！