Nicht in der Lage Hintergrundbild hinzuzufügen Modal zu Bootstrap

Question

Ich möchte ein Hintergrundbild auf dem Header des modalen hinzuzufügen und so dachte ich, wenn ich folgendes tun würde:

.modal-header{ 
background-image: url('../images/extended_top_provider.gif'); 
} 

Der Header würde das Bild anzeigen aber es tut. Stattdessen geschieht Folgendes:

Ich habe auch versucht, für die verschiedenen Browser-Icons hinzufügen, aber es funktioniert nicht entweder das Bild angezeigt werden soll.

Jede Hilfe wäre

UPDATE

ich in der Lage bin, um das Bild hinzufügen möchten, nicht das Recht ein, etwas falsch mit dem Pfad des Bildes geschätzt werden, aber die folgenden Bilder Ausrichten nicht korrekt , Keine Ahnung warum.

$(function(){ 
 
    $('##myModal').modal('show'); 
 
});

.client_logos { 
 
    display: inline-block; 
 
    width:100%; 
 
    }

<div class="ie-only" style="overflow-y:hidden;"> 
 
     \t <div class="modal fade in" id="myModal" aria-hidden="false"> 
 
      \t <div class="modal-dialog modal-md custom-height-modal"> 
 
       \t <div class="modal-content"> 
 
        \t <div class="modal-header" style="background: url('http://www.freedigitalphotos.net/images/img/homepage/87357.jpg');"> 
 
         \t <button type="button" class="close" data-dismiss="modal">x</button> 
 
          <h2 class="modal-header">Outdated Browser Detected</h2><p>Our website has detected that you are using an outdated browser. Using your current browser will prevent you from accesing featuers on your website. An upgrade is not required, but is strongly recommend to improve your browsing experince on our website.<br /><br /> 
 
          <b>Use the links below to download a new browser or upgrade your existing browser.</b></p>      
 
         </div><!---Modal-Header Div---> 
 
         <div class="modal-body client_logos"> 
 
         \t <p> <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/en/thumb/e/e3/Firefox-logo.svg/120px-Firefox-logo.svg.png" alt="image" /> 
 
          \t <img class="img-responsive" src="https://productforums.google.com/forum/image/GDF/15104268797498972201/8f39d8ec-5483-4e30-977d-817c8fd1c110" /> </p> 
 
         </div><!---Modal-Body Div---> 
 
         <div class="modal-footer"> 
 
         \t <p class="text-center"><a class="btn btn-default" data-dismiss="modal">Close</a></p> 
 
         </div><!---Modal-Footer Div---> 
 
        </div><!---Modal-Content Div---> 
 
       </div><!---Custom Height Div---> 
 
      </div><!---Modal Fade in Div---> 
 
     </div><!---Start of Modal Div---> \t \t \t \t 
 
\t \t <!--End of Modal container-->

Answer 1

Dies ist wahrscheinlich wegen eines sehr einfachen Grund, background-image Eigenschaft keine Breite und Höhe dauert, so dass Sie Ihre Breite und Höhe .modal-header wie dies angeben:

.modal-header{ 
    width:100px; 
    height:100px; 
    background-image: url('../images/extended_top_provider.gif'); 
} 

Versuchen Sie dies, und sehen Sie den Unterschied, wenn Sie möchten, können Sie einfach einen Tag in Ihrem .modal-header hinzufügen, aber beachten Sie, dass background-image stoppt nicht Seite Wiedergabe, während img Tag tut :)