html - 使重复图像粘在页脚上？

Question

我最初创建了 this site在adobe muse中，然后用adobe BC添加了一些功能。我正在重新创建该站点，因为 Adob​​e Muse 中的代码太乱了，无法掌握最新情况。

我正在努力获得位于页脚顶部的波浪效果。

这是我目前的代码；

https://jsfiddle.net/Gar3H/215/

<div id="footerDecor"></div>
<div id="footerWrapper">

<div id="footer">

<p>MOTIVATE, INSPIRE & EDUCATE</p>

<div class="footerFloat">
<h4>Header 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="footerFloat">
<h4>Header 2</h4>
<ul>
  <li>Line 1</li>
  <li>Line 2</li>
  <li>Line 3</li>
  <li>Line 4</li>
</ul>
</div>
<div class="footerFloat">
<h4>Header 3</h4>
<ul>
  <li>Line 1</li>
  <li>Line 2</li>
  <li>Line 3</li>
  <li>Line 4</li>
</ul>
</div>
<div class="footerFloat">
<h4>Header 4</h4>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div id="copyrightInfo">
<p>© 2014 Kim O Swim. All Rights Reserved.&nbsp;|&nbsp; Site and brand design by <a href="http://www.transitiongraphics.co.uk">Transition Graphics</a></p>
</div>

</div>

</div> <!-- end footerWrapper -->

    #footerDecor {
    background: url(/images/wave-footer.png) center repeat-x;
    background-size: auto 100%;
}

#footerWrapper {
    color: #FFFFFF;
    font-size: 12px;
    line-height: 18px;
    background-color: #333333;
    width: 100%;
    overflow:hidden;
    padding: 40px 0 40px 0;
}
#footer {
    width: 100%;
    margin: auto;
}
.footerFloat {
    width: 100%;
    margin-bottom: 15px;
    }
@media all and (min-width: 960px) {
#footer {
    width: 960px;
    margin: auto;
} 
.footerFloat {
    width: 25%;
    float: left;
}
}
#copyrightInfo {
    width: 960px;
    margin: auto;
    float: left;
}

提前感谢您的建议。

附言我也想让页脚贴在浏览器的底部，只是觉得这可能很容易同时解决？

Answer 1

更新 fiddle :https://jsfiddle.net/Gar3H/216/

CSS 更新:

#footerDecor {
    background: url(http://www.kimoswim.co.uk/images/wave-footer.png);
    background-position: 0 0;
    width: 100%;
    height: 80px;
}

容纳背景图片的容器需要有指定的宽度和高度，否则它不会与背景图片一起显示(因为从技术上讲，它不占用空间。给它一个 100% 的宽度和一个高度，它就会显示向上水平重复。