Hintergrundbild angepasst?
dieeinzigwahre
- css
Hallo!
Habe auf dieser Seite http://clueso.de/ gesehen, dass sich das Hintergrundbild scheinbar an die Bildschirmgröße "anpasst" bzw. das Bild wird ja entsprechend zugeschnitten. Wie funktioniert sowas? Suche seit langem nach einer ähnlichen Lösung und finde diese hier sehr elegant.
Viele Grüße
Om nah hoo pez nyeetz, dieeinzigwahre!
Wie funktioniert sowas?
Wenn man die Seite ohne Javascript anschaut, stellt man fest, dass es sich um Javascript-Lösung handelt.
Matthias
hallo,
Habe auf dieser Seite http://clueso.de/ gesehen, dass sich das Hintergrundbild scheinbar an die Bildschirmgröße "anpasst" bzw. das Bild wird ja entsprechend zugeschnitten. Wie funktioniert sowas?
es wird nur indirekt zugeschnitten. Ein Javascript (http://www.clueso.de//js/image_size.js --> function BGsize()) misst die Viewportbreite[*] und -länge und wechselt anhand ausgewählter Minimal- bzw. Maximalgrenzen zwischen drei Bildern.
var bgimage_small = 'http://www.clueso.de/cms/getimage.php?1496.jpg';
var bgimage_medium = 'http://www.clueso.de/cms/getimage.php?1497.jpg';
var bgimage_large = 'http://www.clueso.de/cms/getimage.php?1498.jpg';
den Rest des Zuschneidens macht der Container mit overflow:hidden;
[*] - ich schätze jedenfalls, dass die Viewportmaße genommen werden
grüße,
henman