Perfekte Ausführliche Hintergrundbild, CSS-Tricks
- Füllt ganze Seite mit Bild, kein weißer Raum
- Scales Bild nach Bedarf
- Behält Bildanteile (aspect ratio)
- Das Bild ist auf Seite zentriert
- Nicht dazu führen, Bildlaufleisten
- Als Cross-Browser-kompatibel wie möglich
- Ist das nicht ein paar ausgefallene Spielereien wie Flash
Awesome, Leicht, Progressive CSS3 Way
Wir können dies tun, rein durch CSS durch die Hintergrund-Leimeigenschaft jetzt in CSS3. Wir werden das HTML-Element verwenden (besser als Körper, wie es immer zumindest die Höhe des Browserfensters). Wir setzen einen festen und zentriert Hintergrund auf ihm, dann seine Größe unter Verwendung von Hintergrund-Größe auf dem Cover Schlüsselwort eingestellt wird.
- Safari 3+
- Chrome Was auch immer +
- IE 9+
- Opera 10+ (Opera 9.5 unterstützt Hintergrund-Größe, aber nicht die Schlüsselwörter)
- Firefox 3.6+ (Firefox 4 unterstützt nicht-Anbieter als Präfix-Version)
Aber seien Sie vorsichtig, Leser Pierre Orsander sagten, dass sie versucht, dies und hatte einige Probleme mit Links auf der Seite entladen ist.
Update: Matt Litherland schreibt in sagen, dass jemand die oben IE Filter und Probleme mit Scrollbalken oder tote Links oder was auch immer (wie Pierre oben) nicht zu verwenden, versuchen, versuchen, sie auf den HTML-Code oder Körperelement verwendet. Aber anstatt eine feste Position div mit 100% Breite und Höhe.
CSS-Only Technik # 1
Vielen Dank, wie üblich, für diese alternative Version zu Doug Neiner. Hier verwenden wir ein Inline Element, das in jedem Browser, um die Größe in der Lage. Wir legen min-Höhe, die sich vertikal er füllt das Browserfenster hält, und legen eine 100% Breite, die horizontal Füllung hält. Wir setzten auch eine min-Breite der Breite des Bildes, so dass das Bild wird nie kleiner als es tatsächlich ist.
Hier ist die CSS:
- Jede Version von gutem Browser: Safari / Chrome / Opera / Firefox
- 6 IE: Borked - aber wahrscheinlich fixierbar, wenn Sie irgendeine Art von fester Positionierung Shim verwenden
- 7/8 IE: Meistens arbeitet, nicht in kleinen Größen Zentrum, sondern füllt Bildschirm fein
- IE 9: Werke
CSS-Only Technik # 2
Eine recht einfache Art und Weise zu handhaben ist ein Inline-Bild auf der Seite zu setzen, feste Position es nach oben links, und gibt ihm einen min-width und min-Höhe von 100%, die Erhaltung es Seitenverhältnis ist.
Allerdings bedeutet dies nicht zentriert das Bild und das ist ein ziemlich gemeinsamer Wunsch hier. So können wir das Problem beheben, indem das Bild in einem div Verpackung. Das div werden wir doppelt so groß wie das Browser-Fenster machen. Dann wird das Bild gelegt, noch ist es Seitenverhältnis beibehalten und für das sichtbare Browserfenster, und die Tote Zentrum davon.
Credit Corey Worrell für das Konzept auf diesem.
jQuery Method
Diese ganze Idee wird viel einfacher (aus einer CSS-Perspektive), wenn wir, wenn das Seitenverhältnis des Bildes kennen (inline wir beabsichtigen, als Hintergrund verwendet werden) größer oder kleiner als das aktuelle Seitenverhältnis des Browserfensters. Wenn es niedriger ist, als wir nur die Breite zu 100% auf dem Bild einstellen können und wissen, es wird die Höhe und die Breite füllen. Wenn sie höher ist, können wir nur die Höhe auf 100% und weiß festgelegt, dass sie sowohl die Höhe und Breite füllen.
Es geht dabei nicht zum Zentrieren, aber man kann dies auf jeden Fall ändern, das zu tun. Credits Koen Haarbosch für das Konzept hinter dieser Idee.
- IE7 + (könnte wahrscheinlich mit einer festen Position Shim in IE6 erhalten)
- Die meisten anderen Desktop-Browser
Zunächst möchten Sie Bilder wie 1024.jpg machen, 1280.jpg, 1366.jpg usw. Dann stattdessen ein img des Ladens, würden Sie einen Shim laden.
Wenn Sie nicht die gif Shim mögen (ich persönlich glaube, es ist OK, weil es nicht „Inhalt“ ist, ist es ein Hintergrund) Sie laden stattdessen eine der realen Bilder können. Dieser Code wird für das Konto.
Beachten Sie, dass Bildschirmbreite nicht die einzig mögliche gute Informationen ist eine Bildgröße zu haben, bei der Wahl. Sehen Sie in diesem Artikel.
Nur aus Gründen der Nachwelt, gibt es ein weiteres Beispiel hier genannt Table.php die eine alte Technik verwendet, die ein Teil dieses Artikels verwendet werden. Es hatte einige Geschicklichkeit, war aber nicht ganz so gut wie jede CSS-Technik jetzt oben dargestellt.
Andere Ressourcen
Teile das:
Die div-Container, für Inhalte ermöglicht wird gezeigt hinterlassen eine große weiße Box in der Mitte der Seite.
Ein wenig mehr Informationen, und wir sollten in der Lage sein, praktisch nichts zu tun.
Dank Chris für einen weiteren großen Beitrag!
Ich habe für meine Entwürfe alle Arten von Nicht-Flash-Vollbild-Lösungen zu erkunden. Eine Sache, die ich finden wollte, ist eine Cross-Browser-Lösung, die
a) Resized das Zentrum für das Bild und nicht mit der Oberteil
b) War in der Lage zu verblassen in Laden der Seite (mit voller ‚Vorbelastung‘ control)
c) verwendet, um eine minimale Menge an Code für schnelle Seitendarstellung.
Rießig war eine meiner ersten Wahl. Aber seine JS wurde in Konflikt mit anderen Elementen und ich wusste nicht, wie die Tatsache, dass das Bild nicht schön die ganze Zeit verblasst in könnte. Je nachdem, was auf Seite Last los war, gab es keinen sicheren Weg, um den Prozess zu steuern.
Ich fand dann einen anderen Ansatz, der so weit funktioniert, wie ich in allen Browsern sagen kann, nicht verwenden JS oder Flash und beantwortet meine Anforderungen.
Es ist eine Mischung von CSS und die Verwendung von Tabellen. Ich weiß ... es ist nicht ‚rein‘, aber es macht den so gut Trick ...
Ich konnte das img mit JQuery Ziel es genau auf Seite Last verblasst in haben, wie ich wollte - sobald das Bild für die Anzeige wirklich bereit war - kein Platz für Fehler und keinen Platz für JQuery die FadeIn starten, bevor das Bild fertig heruntergeladen hatte.
Der Hintergrund ist ein Vollbild-Hintergrund, die über einen verschachtelten div-Tag auslagert. Es wurde wieder auf IE6 getestet und funktioniert in den meisten allen Browsern. Führt ein wenig rau in älteren Browsern aufgrund einig zufälligen jQuery Funktionalität pro Client-Anforderung hinzugefügt.
Hey, das ist wirklich der sauberste - einfachste Weg für einen süßen Arsch Hintergrund mit!
Aber ich kann nicht scheinen, um diesen workin in meinem DIV zu bekommen. Es sollte möglich sein, oder?
My DIV eine Fluid Breite und eine feste Höhe von 200 Pixel.
Ich möchte das Hintergrundbild immer in der Breite passen, Seitenverhältnis und in der Mitte zu halten.
Aber wie kann ich das anfangen mit diesen Codes?
Ist es möglich, ein mehr ganzseitige Bilder zu haben, die Hintergrund-Bilder?
Zum Beispiel wollte, wenn Sie eine Reihe von Bildern in HTML hatten und Sie jedes die Höhe und Breite des Browsers und verhältnismäßig Skalierung in der gleichen Art und Weise, dass Hintergrund-Abdeckung erreicht haben, aber es auch im Belegfluss zu halten, so dass Sie scrollen Sie nach unten könnte die Seite als üblich.
Also im Grunde wie die Technik Nummer 2, jedoch ohne feste Positionierung auf dem Elternteil?