Mühelose Vollbild-Hintergrundbilder mit jQuery

Heute erstellen wir eine einfache und unterhaltsame Webseite, die ausschließlich dem Zweck dient, Fullscreenr zu präsentieren, ein großartiges kleines jQuery-Plugin, mit dem Sie ganz einfach ein Hintergrundbild hinzufügen können, das automatisch an die Fenstergröße angepasst wird.

Wir werden auch einige @ font-face- und rgba-Aktionen hinzufügen, um den Rest des Builds modern und lehrreich zu gestalten. Lass uns anfangen!

Demo

Nur so können Sie sich ein Bild von dem machen, was wir bauen. Schauen Sie sich die Demo unten an. Um die jQuery in Aktion zu sehen, ändern Sie die Größe des Browserfensters und beobachten Sie, wie sich das Bild dynamisch anpasst.

Demo ansehen

Nun, da Sie gesehen haben, wie es funktioniert, bauen wir es!

Schritt 1: Holen Sie sich Fullscreenr

Als erstes sollten Sie auf die Fullsreenr-Website gehen und eine Kopie herunterladen. Schnappen Sie sich die JS-Dateien und werfen Sie sie in einen Ordner mit einem grundlegenden Website-Framework: HTML, CSS und Bilderordner.

Schritt 2: Starten Sie den HTML-Code

Um den HTML-Code zu beginnen, geben Sie den Code für eine leere Seite ein und fügen Sie die Verweise für das Stylesheet und die beiden JavaScript-Dateien hinzu.

Design Shack + Fullscreenr

Schritt 2: Wählen Sie ein Hintergrundbild

Bevor wir den Code zum Platzieren unseres Hintergrundbildes einfügen, müssen wir die Größe kennen. Was bedeutet natürlich, dass wir ein Bild finden müssen.

Das Bild unten habe ich von Faisal.Saeed auf Flickr Creative Commons gepackt. Es ist eine fantastische schneebedeckte Bergszene, die die perfekte Kulisse für unsere Website bilden sollte.

Als Nächstes habe ich das Bild so bemessen, dass es 907px mal 680px ist. Dies sind die Dimensionen, die wir in unserem nächsten Schritt verwenden werden.

Schritt 3: Fügen Sie das Fullscreenr-Snippet ein

In den Demo-Dateien des Fullscreenr-Downloads sollten Sie den folgenden JavaScript-Ausschnitt finden, um das Plugin zu aktivieren. Ich habe es mit den oben angegebenen Bildmaßen etwas angepasst.

var FullscreenrOptions = {width: 907, height: 680, bgID: '#bgimg'}; jQuery.fn.fullscreenr (FullscreenrOptions);

Alles, was Sie für Ihre eigene Version tun müssen, ist, die Höhe und Breite an das Ihres eigenen Bildes anzupassen.

Schritt 4: Body HTML

Als nächstes gibt es ein Stück HTML auf der Demo-Seite, das Sie sich anschaffen müssen. Die Struktur mag ein wenig funky wirken, aber eigentlich hat der Entwickler nur das Hintergrundbild auf den Körper angewendet und einen Basiscontainer (realBody) erstellt, in den Sie den restlichen Inhalt einfügen können. Wenn Sie die vom Entwickler verwendeten Div-ID-Namen nicht mögen, können Sie sie auf konventionellere Weise ändern.

<img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_4.jpg"> <p>Das Plugin wird mit einer gepunkteten Bildüberlagerung geliefert, die unten in einer vergrößerten Ansicht gezeigt wird. Wenn Sie diesen Effekt nicht mögen, lassen Sie ihn einfach weg!</p> <img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_5.jpg"> <p>Wenn Sie möchten, können Sie hier aufhören und mit Ihrem eigenen Design fortfahren. Wenn Sie wissen möchten, wohin Sie von hier aus gehen möchten, werde ich mit einem lustigen Design enden. </p> <h2>Schritt 6: Fügen Sie eine Hintergrunddivision und eine Kopfzeile hinzu</h2> <p>Jetzt, da wir unser Hintergrundbild haben, möchten wir ein Div über ihm zentrieren und es mit einem Hintergrund füllen. Wir geben ihm auch eine einfache Kopfzeile, die ich angesichts des schneebedeckten Hintergrundbilds für angemessen hielt. </p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_6.jpg"> <h2>Schritt 7: Fügen Sie ein Header-Bild hinzu</h2> <p>Der nächste Schritt ist extrem einfach. Alles, was Sie tun müssen, ist ein Bild zu werfen, das die gleiche Breite wie der Container hat (800px).</p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_7.jpg"> <h2>Schritt 8: Fügen Sie etwas Text hinzu</h2> <p>In diesem Schritt fügen wir der Seite einen grundlegenden Fülltext hinzu und im nächsten fügen wir ein Raster mit Bildern hinzu. Da der Text hypothetisch in die Bilder eingebunden wird, werfen wir alles in ein "Gitter". div.</p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_8.jpg"> <h2>Schritt 9: Fügen Sie die Galerie hinzu</h2> <p>Zum Abschluss der Seite werfen wir eine einfache Bildergalerie aus, die im Grunde nur ein Raster aus neun JPGs ist. Um den Fotografen Kredit zu geben, habe ich sie mit den Original-Quellbildern auf Flickr verlinkt. </p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_9.jpg"> <h2>Fazit</h2> <p>jQuery und das Fullscreenr-Plugin stellen die einfachste und am besten aussehende Lösung dar, die ich für skalierbare Hintergrundbilder gefunden habe. Wenn Sie den gleichen Effekt lieber mit CSS versuchen möchten, lesen Sie die Methoden von Chris Coyier für CSS-Tricks. Chris stellt drei mögliche Alternativen vor. Die letzte davon verwendet reines CSS und funktioniert viel besser als andere CSS-Versuche, die ich gesehen habe. </p> <p>Wie immer danke fürs Lesen. Wenn Ihnen der Artikel gefallen hat, geben Sie uns einen Tweet, ein Digg oder einen anderen sozialen Aufschrei, mit dem Sie sich ein Bild machen können!</p>