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

  1. 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);


  2. 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%; }


  3. 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/

Neuen Kommentar schreiben

Plain text

  • Keine HTML-Tags erlaubt.
  • Internet- und E-Mail-Adressen werden automatisch umgewandelt.
  • HTML - Zeilenumbrüche und Absätze werden automatisch erzeugt.
By submitting this form, you accept the Mollom privacy policy.