jQuery Tutorial: mitskalierende Hintergrundbilder

Flash ist nicht erst seit der Einführung von HTML5 und dessen neuem Videotag, welches h.264 abspielen kann auf dem absteigenden Ast. Flash ist properitär, die Suchmaschinen haben ihre Probleme, sehr Ressourcenfressend (zumindest auf dem Mac) und läuft zudem weder auf dem iPhone, noch auf dem iPad von Apple. Vorteil von Flash war immer das es sehr dynamisch ist und schöne Effekte kreiert werden können.

Doch diese Grenzen heben sich langsam dank jQuery und anderen Frameworks auf. Sie bringen viele Animationstechniken mit, die Scrollbare Inhalte, Farbübergänge oder ähnliches bewerkstelligen können. In einigen vorherigen Tutorials habe ich schon die jQuery Tools beschrieben und was für schöne Sachen man damit anstellen kann.

Eine schöner Effekt war bzw. ist das mitskalieren eines großen Hintergrundbildes, wie z.B. auf der Website der Deutschen Post. Dies passt sich automatisch der Browser- bzw. Auflösungsgröße des jeweiligen Users an. Zusätzlich ein paar schöne halb-transparente Text boxen und eine schöne Website ist fertig gestaltet.

Umsetzung

Doch wie macht man das? Eigentlich ganz einfach. Wir benötigen dafür jQuery (aktuell in Version 1.4.2) und fragen via Eventabfrage ab ob der User die Browsergröße verändert. Wenn dies geschieht, wird einem (möglichst gut aufgelöstem) Bild auf der Seite mitgeteilt das es seine größe verändern soll – und zwar auf die des Browser-Viewports.

Hört sich erst einmal ganz einfach an – und das ist es im Prinzip auch, soweit man natürlich schon etwas mit JavaScript bzw. jQuery gearbeitet hat.

CSS

body{margin:0px;}
#background{position:fixed; top:0; left:0; z-index:0;}
#ausgabe{background:black; padding:10px 15px; margin:10px; border:1px solid #cecece; color:white; opacity:0.8; position:absolute; top:140; z-index:10; font-size:12px; width:500px;}

HTML

<body>
     <img src="bg.jpg" alt="Background-Image" id="background" />
     <div id="ausgabe">Ein Layer über dem Hintergrundbild</div>
</body>

Wir legen eine kleine HTML Datei an, welche nur das Bild zur Skalierung und eine halbtransparente Ebene mit dem Content beinhält.

JavaScript

$(document).ready(function(){
    var width  = $(window).width();
    $("#background").width(width);
    $(window).resize(function(){
        width  = $(window).width();
        $("#background").width(width);
    });
})

Wenn das Dokument fertig geladen ist, wird die größe des Browser-Viewports an die Variable width weitergegeben und die ID Background (das Bild) in der Breite an das Fenster angepasst. Die höhe skaliert sich automatisch mit. Das gleiche soll natürlich auch passieren wenn sich die Fenstergröße ändert. Dafür fragen wir das Event resize in Verbindung mit dem Browserfenster (window) ab. Sollte sich hier etwas tun wird das Event ausgelöst und ebenfalls die Breite angepasst.

Also insgesamt ein leichtes diesen Effekt zu nutzen. Optimal z.B. für Seiten im Vintage Style.

Andre Teich

arbeitet als Webentwickler und Webdesigner bei der Firma Tintometer in Dortmund. Die Fachgebiete sind die Webentwicklung mit PHP, JavaScript, MySQL, CSS und die Designarbeiten mit der Adobe Creative Suite.

6 Kommentare zu "jQuery Tutorial: mitskalierende Hintergrundbilder"

Tweets die jQuery Tutorial: Fullscreen Bild – mitskalierend | Chukki.de erwähnt -- Topsy.com

[...] Dieser Eintrag wurde auf Twitter von André Teich, DJ Hennion erwähnt. DJ Hennion sagte: Neuer Beitrag auf Chukki.de – mitskalierende Hintergrundbilder mit #jQuery http://bit.ly/9wbhFG #fb #webentwicklung #webdevelopment #j… [...]

Thorwald 29. Jul 2010 um 11:14 Uhr

Klingt erstmal ganz gut.
EIn Test ergibt aber ein negatives Ergebnis.
Wenn ich alles richtig gemacht habe, wird das Bild zwar skaliert, aber wenn ich ein Bild im Querformat habe und das Browserfenster höher ziehe als breit, dann ist der Rest unten weiß. Also das Bild wird nur über die Breite und nicht über die Höhe mitskaliert.

Vielleicht kannst du das ja noch nachliefern :)

http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/

Thorwald 29. Jul 2010 um 11:15 Uhr

Nachtrag:

Probleme müsste es hier z.B. vor allem beim iPad und iPhone geben… und gerade dafür nimmst du schließlich jquery statt Flash ;)

André 29. Jul 2010 um 13:07 Uhr

Ich werd es mir nochmal anschauen und dann nochmal was dazu schreiben. Vielen Dank für den Hinweis

ceejay 02. Feb 2012 um 14:42 Uhr

Gibt ein schönes Plugin, das ich gerne dafür benutze:
superBGImage. Einfach googeln und sofort finden ;-)

Micha 01. Jun 2012 um 21:38 Uhr

Hallo ringsherum.
Auch ich mag jQuery sehr, aber an dieser Stelle ist der Einsatz von jQuery sicherlich etwas übertrieben.
Es reicht ein einfaches css-Schnipsel für das gleiche Ergebnis:
z.b.
html {
backround: #000 url(img/hintergrundbild.jpg) center center no-repeat;
background-attachment: fixed;
background-size: cover;
}
done

Kommentar schreiben