Put images side by side in a fluid footer with one repeating and one fixed size

Question

I am updating a layout of a website. I would like to keep the header and footer images from template 1 and incorporate them into template 2, however, template 2 is designed a bit differently.

In the original template, the footer contained 2 images. Both images are 203px in height. Image 1 is non-repeat and is 950px wide. Image 2 is used to fill the width. It is repeatable. I've tried coding it a myriad of ways and the closest I can come, causes image 2 to fill the entire bottom overriding image 1. I've tried just using image 1, but it doesn't scale properly.

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>