Adding a full width banner and making it bootstrap responsive

Question

I'm trying to modify a bootstrap template to add a full length 1200 px banner at the top, instead of the smaller 120 x 60 images/logo-company.png logo that is there on the original site.

I have tried to no avail, but I would like to be able to seat this larger banner perfectly for desktop view, while having it be responsive on mobile devices.

I assume the original logo was so small that it didn't needto have code call outs to make it responsive.

Would anyone be kind enough to take a look and see if they can supply the necessary HTML and or CSS code to achieve this for me please.

original site. http://jituchauhan.com/industrial/boxed-layout/industrial-darker/index.html

Answer 1

If background image isn't working for you here is a simple solution:

<div class="header-row" id="header-row" style="padding: 0px; overflow:hidden; height:100px;">
        <!-- container-fluid is the same as container but spans a wider viewport, 
    it still has padding though so you need to remove this either by adding 
    another class with no padding or inline as I did below -->
   <div class="container-fluid" style="padding: 0px;">
      <div class="row"> 
        <!-- You originally has it set up for two columns, remove the second 
    column as it is unneeded and set the first to always span all 12 columns 
    even when at its smallest (xs). Set the overflow to hidden so no matter 
    the height of your image it will never show outside this div-->
         <div class="col-xs-12"> 
            <a class="navbar-brand logo" href="index.html">
        <!-- place your image here -->
               <img src="http://placekitten.com/g/1200/600" alt="company logo" style="width: 100%;">
            </a> 
         </div>     
      </div>
   </div>
</div>