html - 在固定的粘性页脚下应用两个背景

Question

我正在使用以下基本的 html 和 css 模式(尽管我的实时代码看起来非常不同)

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
    padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 

/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/
}

<div id="wrap">

    <div id="header">

    </div>

    <div id="main">

    </div>

</div>

<div id="footer">

</div>

在我的页面底部添加一个粘性页脚。

我已经为 body 标签应用了两个背景。一个是重复的木质纹理，然后是顶部的阴影。这两个都在页脚下。

它几乎可以工作，但是在长页面上(您必须向下滚动才能看到页脚)当您调整浏览器窗口大小时，阴影(而不是木头)会爬上页面。我试过将阴影移到右下角的位置，但这根本不起作用。

这是它的一个阶段:我在 FF 和 Safari 中重复了这个问题 http://www.dnbsandbox.com/diablo/

Answer 1

从 css 的第一行中删除:

html {
  height: 100%;
}