Question

我正在开发一个rails项目。我已经完成了所有的rails方面而没有太多问题。但是，我遇到了一个我通常不会遇到的CSS问题。通常遇到红宝石问题！

基本上，我在页面上设置了背景图像。在该页面的顶部，我有一个div元素。当我继续向下移动div元素时，背景图像保持不变。这几乎就像两者相连。这是我的代码：

HTML：

<div class="about_background">

 <div class="container heading_block">
    <h1 class="about_heading"><i class="fa fa-flask"></i> About Abby <i   
    class="fa fa-cutlery"></i></h1>
 </div>

</div>

CSS：

.about_background {
background-image: url("bread.jpeg");
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:fixed;
}

.heading_block {
background-color: rgba(200,100,175, 0.8);
border-radius: 35px;
}

.about_heading {
text-align: center;
font-size: 50px;
}

请告诉我还有什么需要。我尝试在jsfiddle上设置一些东西，但没有得到我需要的东西。如果你需要在github上看到代码，那就是ravenusmc，food_blog。感谢您的帮助！

Answer 1

如果我明白你的观点，那就加上......

min-height: 100%;到about_background课程。

Answer 2

我不确定你是如何尝试移动div的，但这是我通常用来移动元素的。

.heading_block {
position: relative;
top: 10px; //or however far you want to move it. 
background-color: rgba(200,100,175, 0.8);
border-radius: 35px;
 }

Answer 3

我不完全确定我理解你所遇到的问题。

你在移动哪个div？如果它是第一个（外部），那么背景将随之移动，因为它附加到该容器background-attachment不会改变它，实际上如果你重新调整窗口的大小通过这个，您可以看到它实际上正在做的是将背景的位置锁定到您的屏幕上，重新调整窗口大小将使其在容器内滚动。
移动第二个div（内部）会在我的测试中留下背景。

如果必须让背景留在原位，也许将背景附加到身体上。

当向下移动div元素时，背景图像也会移动

3 个答案: