Nachdem ich nun die letzten beiden Projekte sehr stark mit großen Bildern im Hintergrund gearbeitet hab, hier der Weg.
Zutaten:
Module: 0x
Javascript: 1x
CSS: 1x
- Das folgende Script in die script.js packen und in der .info verankern.
(function($){
$(function(){
jQuery(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(function() {
resizeBg();
}).trigger("resize");
});
});})(jQuery); - Das CSS in der style.css (für Omega ist das die global.css oder für Zen-Theme die fresh.css) ergänzen.
img#bg { position: fixed; top: 0; left: 0; z-index: -1;}
.bgwidth { width: 100%; }
.bgheight { height: 100%; } - Cache leeren. Fertig.
Fazit: Es geht natürlich eleganter wie man im original Beitrag von CSS-Tricks sehen kann. Was ich an dieser Herangehensweise schätze ist, dass es egal ist, wo die Bilder ausgegeben werden. Bei der Website von www.waldfitness.de ist es so, dass die Bilder aus einem Image-Field kommen. D.h. ich hab den vollen Zugriff auf Image-Cache und dessen Aktionen. (Z.B. das Umwandeln in ein S/W-Bild und ähnliches).
Mein Tipp für die optimale Bild-Auflösung: 1920 x 1200px
Viel Spaß.
Original-Beitrag: http://css-tricks.com/perfect-full-page-background-image/
Newsletter
Bleiben Sie auf dem Laufenden!
Suche
creatin g GmbH
Dipl. Komm.-Designer Dirk Hermanns
Bödefelder Str. 11a
57392 Schmallenberg
Nordrhein-Westfalen
Germany
51.195989
8.309567
Telefon 02974 96 79 79 0
Telefax 02974 96 79 79 2
Geschäftsführer: Dirk Hermanns
Amtsgericht Arnsberg
HRB 9441
Steuernummer 334/5810/0198
Ust-IdNr DE266562742



Neuen Kommentar schreiben