html - CSS 清理定位

Question

我在完成网站的主页时遇到了一些麻烦。

网站:www.crookednosebeer.com

如果您转到主页，它看起来应该是这样，但是当您向下滚动到页脚时，主要背景和啤酒瓶也会随之出现。我只想让这些东西留在原处，啤酒瓶就在页脚上方被切断的地方。

CSS:

body{
height: 100%; 
width: 100%;
background-color: #b2b2b2;
background: url(../images/trial3.gif) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


/*HERE iS BOTTLE IMAGE */
.smoke {
position: fixed;
bottom: 0;
right: 0;
}

#footer{
height: 125px;
background: #333333;
width: 100%;
overflow:auto;
}

Answer 1

只需从您 body 的 background 属性和您的 .smoke 类中删除单词 fixed。

编辑

我想我明白了。我正在运行 Chrome，并在 Firefox 15 和 IE8 中尝试过。当您将 position:absolute 添加到 .smoke 类并将 position:relative 添加到#footer 分区

你可以玩我的jsFiddle here , 和 here's the result .