html - 将图像并排放置在具有一个重复和一个固定大小的流畅页脚中

Question

我正在更新网站的布局。我想保留模板 1 中的页眉和页脚图像并将它们合并到模板 2 中，但是，模板 2 的设计有点不同。

在原始模板中，页脚包含 2 个图像。两张图片的高度均为 203 像素。图 1 不重复，宽 950 像素。图 2 用于填充宽度。它是可重复的。我已经尝试过无数种方式对其进行编码，而我能做到的最接近的方式是，导致图像 2 填充整个底部覆盖图像 1。我尝试仅使用图像 1，但它不能正确缩放。

CSS：

#footer{
   background: url(../linkto/imageR.png) left 0px repeat-x; 
   background: url(../linkto/image.png) right 0px no-repeat width 950px;
   height:203px;
   text-align: center;
}

HTML

<div id="footer" class="container-fluid">
    <div class="container">
        <div class="col-xs-12 row-title">
            <br> &nbsp;      <h4>Default Text</h4>
        </div>
    </div>
    <div class="row main-footer-content">
        <p>More text here.</p>
    </div>
    <div class="row">
        <div class="col-xs-12 col-md-3">
            <div class="contact-box">
                Contact info
            </div>
        </div>
        <div class="col-xs-12 col-md-3">
            <div class="contact-box">
                More info
            </div>
        </div>
        <div class="col-xs-12 col-md-3">
            <div class="contact-box">
                another column
            </div>
        </div>
        <div class="col-xs-12 col-md-3">
            <div class="contact-box">
                last column
            </div>
        </div>
    </div>
</div>