0

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>
Markai
  • 2,098
  • 1
  • 10
  • 15
  • Are the images dynamic or static? If they are static, then one way to do this is to create one image which is 203 px high, and 2000px wide. The left side is image1, the right side is image2 repeated. 2000 px is arbitrary, and you would simply hide the overflow. – Peter Abolins Mar 22 '18 at 14:09
  • 1
    And then I'd only have to enter one image, I have no idea why I didn't think of that! – Cathelle Mar 22 '18 at 14:42

0 Answers0