Bootstrap Autosizing Hintergrundbilder

Question

Ich versuche, ein Hintergrundbild auf der Kopfzeile Autosize zu machen, aber es wird nicht auf Seitenverhältnisse halten. Hier ist ein Beispiel, das Bild wird unten abgeschnitten: http://i.imgur.com/sxedPHI.png oder wenn ich es so groß mache, erscheint Leerzeichen zwischen ihm und den divs unterhalb der Kopfzeile: http://i.imgur.com/xX1e4GZ.png Ich kann fast scheinen, es funktioniert zu bekommen, aber dann skaliert es das Bild zu ein ungerades Seitenverhältnis und das Bild wird verzerrt: http://i.imgur.com/jtxDNr0.png

Ich möchte, dass die Kopfzeile die GENAUE gleiche Größe wie das Bild ist, dann muss das Bild immer das ganze Bild zeigen (nicht einen Teil abschneidend) und nein Abstand zwischen Kopfzeile und den nächsten Divs.

Dies ist der Code, den ich für den HTML-Teil haben:

<header> 
    T 
    </header> 

Ich glaube, das die entsprechende CSS ist:

header { 
     position: relative; 
     width: 100%; 
     height: 100%; 
     text-align: center; 
     color: #fff; 
     background-image: url("ball.png"); 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-repeat: no-repeat; 
     background-size: 100% auto; 
    } 

Die Seite in Frage ist hier:

http://www.stoppiefail.com/boot/sites3/index.php

Answer 1

Sie verwenden background-size: 100% auto; Am Ende wird der vorherige Code überschrieben.

https://jsfiddle.net/26ejdss6/1/

div{ 
    width:400px; 
    height:187px; 
    background:url('http://ajgdirect.co.uk/wp-content/uploads/2015/04/football.jpg'); 
    background-size:cover; 
    background-position:center; 
} 

Überprüfen Sie auch ein ordentliches Plugin namens backstretch.js aus. Es ist ziemlich gut für diese Art der Sache, vor allem, wenn Auto-Sizing Benutzer Bilder in einem CMS

http://srobbin.com/jquery-plugins/backstretch/

Answer 2

Anstelle der Verwendung von Hintergrundbild hinzugefügt, warum nicht einen IMG-Tag mit einem absoluten div oben drauf verwenden.

HTML:

<header> 
    <img src="your/background/image.jpg" class="bg"> 
    <div class="headerContent">Your Header Content Goes Here</div> 
</header> 

CSS:

header { 
    width: 100%; 
    position: relative; 
} 
header img.bg { 
    width: 100%; 
    height: auto; 
    position: relative; 
    z-index: 0; 
} 
header .headerContent { 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    z-index: 100; 
} 

ich havn't dies getestet, aber es ist nur ein weiterer Weg, um diese außerhalb von CSS zu tun, dass die Höhe des Kopf erlauben würde nie abgeschnitten sein.