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

【问题标题】：CSS/HTML Background, new picture when scrollingCSS/HTML 背景，滚动时的新图片
【发布时间】：2014-11-05 23:18:04
【问题描述】：

我正在开发 [此网站][1]。我有一个显示在上面的“主背景”。

滚动时是否可以使[这张图片][2]继续？

这是我的 CSS：

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

【问题讨论】：

为什么-1没有理由？
我用谷歌搜索了你的问题标题，第一个和第二个结果解决了你的问题。
不，因为它不是我想要的固定背景。
你希望它重复吗？
我想要重复一张新图片 (i.imgur.com/X0B4JeD.jpg) 还是将那张图片作为背景更容易，让背景重复然后有一个 div 标签放置横幅？

标签： html css background positioning

【解决方案1】：

我有点难以弄清楚您对这项工作的设想。

如果您希望背景图片一直沿页面向下直至内容，请使用：

background-repeat: repeat-y;

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

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

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

【讨论】：

【解决方案2】：

你可以使用：

background-attachment: fixed;

【讨论】：

不，因为它是一个博客。我不能让它像那样滚动..那意味着你会有这么小的空间来阅读东西..
我明白了，但您认为它还能如何工作？如果图像的高度小于页面高度，它将在某个点被切断。
是的，我明白这一点..这就是为什么我想知道你是否可以让它滚动，滚动，滚动新背景..当然，它可能看起来很愚蠢..但这就是我想知道的。
在您当前的配置中，这将是困难的。我建议重新考虑你的布局。例如，仅使用蓝色画布作为背景图像，然后在左侧有一个侧边栏元素（将包括照片图像）和在文本上方右侧的内容标题元素（将包括横幅图像）。这样，图像将随文本滚动，并且蓝色画布图案将始终保留在背景上。我认为这是您所希望的最佳效果（一张接一张地使用图像会显得不专业，在某些情况下非常奇怪）。
..是的可能..我会坚持下去。我理解人们说附件：固定。我明白了。所以是的，我想我会考虑一下设计……谢谢！

【解决方案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;
}

【讨论】：

这会导致它被修复。想象一下，我想要一张新图片在当前图片的位置继续。它不是我想要的固定图片。我希望你能够无休止地向下滚动并且背景保持在原来的位置。
@Pontus 这就是background: fixed; 所做的。当网站内容继续滚动时，它会保持背景冻结。
@Pontus 显示您的一些代码或尝试 repeat-y 以便它重复
所以我不可能拥有现在的样子，在我现在结束的地方继续一个新的背景？如果我添加“bakcrground-attachment：fixed;”整个文本都出现在横幅和其他东西上。就像，我希望它留下来。我希望页面以新背景向下滚动，我不希望文本滚动。我想要这个页面。

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

尝试将背景图片分配给 CSS 中的“body”元素，然后将您需要滚动的所有内容放在一个“容器”div 中，背景为白色（或任何您喜欢的）。

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

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

【讨论】：