Perfektes Vollbild-Hintergrundbild

Dieser Beitrag wurde ursprünglich am 21. August 2009 veröffentlicht und ist nun aktualisiert, da er vollständig überarbeitet wurde. Beide ursprünglichen Methoden wurden entfernt und durch vier neue Methoden ersetzt.

Ziel ist es, ein Hintergrundbild auf einer Website zu haben, das das gesamte Browserfenster jederzeit ausfüllt. Lassen Sie uns das genauer spezifizieren:

• Füllt die gesamte Seite mit dem Bild, kein Weißraum
• Skaliert das Bild nach Bedarf
• Behält die Bildproportionen (Seitenverhältnis) bei
• Das Bild ist auf der Seite zentriert
• Verursacht keine Scrollbalken
• So browserübergreifend kompatibel wie möglich
• Keine ausgefallenen Tricks wie Flash

Der tolle, einfache, progressive CSS-Weg

Wir können dies rein über CSS realisieren, dank der Eigenschaft background-size, die jetzt in CSS verfügbar ist. Wir verwenden das html-Element (besser als body, da es immer mindestens die Höhe des Browserfensters hat). Wir setzen einen festen und zentrierten Hintergrund darauf und passen dann seine Größe mit background-size auf das Schlüsselwort `cover` an.

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Funktioniert in

• Safari 3+
• Chrome Beliebig+
• IE 9+
• Opera 10+ (Opera 9.5 unterstützte background-size, aber nicht die Schlüsselwörter)
• Firefox 3.6+ (Firefox 4 unterstützt die nicht-Vendor-präfixierte Version)

Update: Danke an Goltzman in den Kommentaren, der auf einen Artikel der Adobe Developer Connection hinwies, der Code enthält, um den IE ebenfalls Cover-Hintergründe darstellen zu lassen

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

Aber Vorsicht, Leser Pierre Orsander sagte, er habe dies ausprobiert und hatte Probleme mit Links auf der Seite, die nicht mehr funktionierten.

Update: Matt Litherland schreibt, dass jeder, der die oben genannten IE-Filter verwendet und Probleme mit Scrollbalken oder toten Links oder was auch immer (wie Pierre oben) hat, versuchen sollte, sie nicht auf dem html- oder body-Element zu verwenden. Stattdessen sollte ein fest positionierter Div mit 100% Breite und Höhe verwendet werden.

Nur-CSS-Technik #1

Großer Dank geht wie immer an Doug Neiner für diese alternative Version. Hier verwenden wir ein Inline-Element, das in jedem Browser in der Größe angepasst werden kann. Wir setzen eine min-height, die es vertikal das Browserfenster ausfüllen lässt, und eine 100% width, die es horizontal ausfüllen lässt. Wir setzen auch eine min-width, die der Breite des Bildes entspricht, damit das Bild nie kleiner wird, als es tatsächlich ist.

Der besonders clevere Teil ist die Verwendung einer Media Query, um zu überprüfen, ob das Browserfenster kleiner als das Bild ist, und die Verwendung einer Kombination aus prozentualem und negativem linken margin, um es trotzdem zentriert zu halten.

Hier ist das CSS

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

Funktioniert in

• Jede Version guter Browser: Safari / Chrome / Opera / Firefox
• IE 6: Kaputt – aber wahrscheinlich reparierbar, wenn Sie eine Art von Fixed-Positioning-Shim verwenden
• IE 7/8: Funktioniert größtenteils, zentriert nicht bei kleinen Größen, füllt aber den Bildschirm gut aus
• IE 9: Funktioniert

Demo ansehen

Nur-CSS-Technik #2

Eine ziemlich einfache Methode, dies zu handhaben, besteht darin, ein Inline-Bild auf der Seite zu platzieren, es fest oben links zu positionieren und ihm eine min-width und min-height von 100% zu geben, wobei das Seitenverhältnis beibehalten wird.

<img class="bg" src="images/bg.jpg" alt="">

.bg {
  position: fixed; 
  top: 0; 
  left: 0; 
	
  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
}

Dies zentriert das Bild jedoch nicht, und das ist hier ein ziemlich häufiger Wunsch… Wir können das beheben, indem wir das Bild in einem Div umschließen. Diesen Div machen wir doppelt so groß wie das Browserfenster. Dann wird das Bild platziert, wobei das Seitenverhältnis beibehalten wird und das sichtbare Browserfenster sowie dessen exakte Mitte abgedeckt werden.

<div class="bg">
  <img src="images/bg.jpg" alt="">
</div>

.bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
.bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

Die Idee hierzu stammt von Corey Worrell.

Funktioniert in

• Safari / Chrome / Firefox (nicht sehr weit zurück getestet, aber aktuelle Versionen sind in Ordnung)
• IE 8+
• Opera (jede Version) und IE scheitern beide auf die gleiche Weise (falsch positioniert, ich bin mir nicht sicher warum)
• Peter VanWylen schrieb, dass, wenn Sie das Bild über JavaScript hinzufügen, das img width: auto; und height: auto; haben muss, um in IE 8, 9 oder 10 zu funktionieren.

Demo ansehen

Update Januar 2018: Versuchen Sie, dies auf Android zum Laufen zu bringen? JL García schrieb mir, dass er height: 100%; und overflow: hidden; zum HTML-Element hinzufügen musste, damit es funktioniert. Das vollständige Snippet ist

html {
  background: url(images/bg.jpg) no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  overflow: hidden;
}

Ich habe es getestet, und es schien völlig korrekt. Ohne / Mit.

jQuery-Methode

Diese ganze Idee wird (aus CSS-Perspektive) viel einfacher, wenn wir wissen, ob das Seitenverhältnis des Bildes (inline , das wir als Hintergrund verwenden wollen) größer oder kleiner ist als das aktuelle Seitenverhältnis des Browserfensters. Wenn es niedriger ist, können wir nur die width des Bildes auf 100% setzen und wissen, dass es sowohl Höhe als auch Breite ausfüllt. Wenn es höher ist, können wir nur die height auf 100% setzen und wissen, dass es sowohl Höhe als auch Breite ausfüllt.

Wir haben über JavaScript Zugriff auf diese Informationen. Wie üblich hier verlasse ich mich gerne auf jQuery.

<img id="bg" src="images/bg.jpg" alt="">

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

$(window).load(function() {    
  var theWindow = $(window),
  $bg = $("#bg"),
  aspectRatio = $bg.width() / $bg.height();	    			    		
  function resizeBg() {		
    if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
      $bg
      .removeClass()
      .addClass('bgheight');
    } else {
      $bg
      .removeClass()
      .addClass('bgwidth');
    }					
  }	                   			
  theWindow.resize(resizeBg).trigger("resize");
});

Dies berücksichtigt nicht die Zentrierung, aber Sie könnten dies definitiv anpassen. Anerkennung geht an Koen Haarbosch für das Konzept hinter dieser Idee.

Funktioniert in

• IE7+ (könnte wahrscheinlich auch in IE6 mit einem Fixed-Positioning-Shim funktionieren)
• Die meisten anderen Desktop-Browser

Demo ansehen

Update (Juni 2012): Leser Craig Manley schreibt mit einer Technik, um ein passend dimensioniertes Hintergrundbild entsprechend dem Bildschirm zu laden. Das heißt, laden Sie kein riesiges 1900px breites Hintergrundbild für ein iPhone.

Zuerst würden Sie Bilder wie 1024.jpg, 1280.jpg, 1366.jpg usw. erstellen. Dann würden Sie anstatt eines Bildes einen Shim laden.

<img id="bg" style="position: fixed; left: 0; top: 0;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="">

Wenn Ihnen der GIF-Shim nicht gefällt (persönlich finde ich ihn in Ordnung, weil es kein "Inhalt", sondern ein Hintergrund ist), könnten Sie stattdessen eines der echten Bilder laden. Dieser Code wird das berücksichtigen.

Dann testen Sie die Bildschirmbreite und setzen den src des Bildes entsprechend. Der unten stehende Code macht dies bei Größenänderung, was Sie vielleicht wünschen oder auch nicht. Sie könnten den Code auch nur einmal ausführen, wenn Sie wollten.

(function() {

var win = $(window);

win.resize(function() {
    
  var win_w = win.width(),
  win_h = win.height(),
  $bg = $("#bg");

    // Load narrowest background image based on 
    // viewport width, but never load anything narrower 
    // that what's already loaded if anything.
    var available = [
      1024, 1280, 1366,
      1400, 1680, 1920,
      2560, 3840, 4860
    ];

    var current = $bg.attr('src').match(/([0-9]+)/) ? RegExp.$1 : null;
    
    if (!current || ((current < win_w) && (current < available[available.length - 1]))) {
      
      var chosen = available[available.length - 1];
      
      for (var i=0; i<available.length; i++)="" {="" if="" (available[i]="">= win_w) {
          chosen = available[i];
          break;
        }
      }
      
      // Set the new image
      $bg.attr('src', '/img/bg/' + chosen + '.jpg');
      
      // for testing...
      // console.log('Chosen background: ' + chosen);
      
    }

    // Determine whether width or height should be 100%
    if ((win_w / win_h) < ($bg.width() / $bg.height())) {
      $bg.css({height: '100%', width: 'auto'});
    } else {
      $bg.css({width: '100%', height: 'auto'});
    }
    
  }).resize();
  
})(jQuery)</available.length;>

Beachten Sie, dass die Bildschirmbreite nicht die einzige nützliche Information bei der Auswahl einer Bildgröße ist. Siehe diesen Artikel.

Viel Spaß

Wenn Sie dies nutzen, können Sie gerne in den Kommentaren unten mitteilen, welche Technik Sie verwendet haben und ob Sie sie in irgendeiner Weise geändert haben. Es ist immer cool, Techniken „in freier Wildbahn“ zu sehen.

Der Vollständigkeit halber gibt es hier ein weiteres Beispiel namens table.php, das eine alte Technik verwendet, die früher Teil dieses Artikels war. Es hatte einige Raffinessen, war aber nicht ganz so gut wie die beiden jetzt vorgestellten CSS-Techniken.

Weitere Ressourcen

• Vegas jQuery-Plugin (Jay Salvat)
• So ändern Sie die Deckkraft eines CSS-Hintergrundbildes (DigitalOcean)