Question

我最初在Adobe muse中创建了this site，然后使用adobe BC添加了一些功能。我正在重新创建网站，因为Adobe Muse的代码非常混乱，因此无法保持最佳状态。

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

这是我目前的代码;

<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;
}

提前感谢您的建议。

P.S。我还想让页脚粘在浏览器的底部，只是觉得这可能很容易同时解决？

Answer 1

更新小提琴：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％，高度为它显示出水平重复。

将重复图像粘贴到页脚？

1 个答案: