Question

我正在[本网站] [1]工作。我有一个＆＃34; mainbackground＆＃34;显示在上面。

滚动时是否可以继续[此图片] [2]？

这是我的CSS：

background-image: url("bakgrund.jpg")

Answer 1

我很难弄清楚你是如何设想这个工作的。

如果您希望背景图片继续向下移动到内容，请使用：

background-repeat: repeat-y;

如果您想要多个图像作为背景，请使用：

background-image: url(image-url-1), url(image-url-2);

如果您希望图像与文本一起滚动（即，不固定），但在到达内容结尾后继续滚动，或者如果您想动态加载多个图像需要时，您需要使用AJAX或其他方式以编程方式进行。

Answer 2

您可以使用：

background-attachment: fixed;

Answer 3

如果您正在尝试使用固定背景，请尝试此http://jsfiddle.net/kkmLpqqd/

<div id="a">a</div>

#a{
width:300px;
height:2000px;
background-image:url(http://placekitten.com/300/301);
background-attachment:fixed;
background-repeat:no-repeat;
background-color:green;
}

Answer 4

.class-name { 
  background:url(your-image.jpg) no-repeat; 
  background-attachment: fixed;
 }

http://davidwalsh.name/css-fixed-position-background-image

Answer 5

尝试将背景图像分配给CSS中的“body”元素，然后将所需的所有内容放在“容器”div中，并带有白色背景（或任何您喜欢的内容）。< / p>

css:
body {
    width: 100%;
    background-image: ...
    background-attachment: fixed;
}
#container {
    margin: 0 auto;
    background: #FFF;
}

html:
<body>
    <div id="container>
       ...
    </div>
</body>

CSS / HTML背景，滚动时的新图片

5 个答案: