Question

我在很多网站上都看过这个技巧，我想把它作为我自己的项目我的图像background.jpg非常大，只是为任何屏幕尺寸做好准备我希望将背景图像置于访客的窗口中我的意思是，在滚动窗口时，内容会移动，但背景将保持原位 - 垂直和水平居中。

BTW大多数观众都会有旧的蹩脚PC，所以如果它是JS，最好不要闪烁。

Answer 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 */
}

Answer 2

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

Answer 3

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

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 个答案: