|
|||
Verhindern des Nachladens von kleineren Hintergrundbildern
Hallo allerseits,
ich verwende in meiner CSS-Datei folgenden Code, um abhängig von der Größe des Browserfesters nur das von der Größe her notwendigste Hintergrundbild zu laden: Code:
@media all and (min-width: 1px) and (max-width: 480px) { .home .post-entry { background: white url(/images/hintergrund480.jpg) no-repeat center center fixed; } } @media all and (min-width: 481px) and (max-width: 1024px) { .home .post-entry { background: white url(/images/hintergrund1024.jpg) no-repeat center center fixed; } } @media all and (min-width: 1025px) and (max-width: 1680px) { .home .post-entry { background: white url(/images/hintergrund1680.jpg) no-repeat center center fixed; } } @media all and (min-width: 1681px) and (max-width: 2560px) { .home .post-entry { background: white url(/images/hintergrund2560.jpg) no-repeat center center fixed; } } @media all and (min-width: 2561px) { .home .post-entry { background: white url(/images/hintergrundmax.jpg) no-repeat center center fixed; } } .home .post-entry { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } Nun zu meiner Frage: Beim Verkleinern und Vergrößern des Browserfensters mit der Maus verschwindet immer wieder für einen kurzen Augenblick das Hintergrundbild, da der Browser eine kleinere bzw. größere Version des Hintergrundbildes nachlädt. Wie kann ich erreichen, dass der Browser beim Verkleinern der Fenstergröße nur das ursprünglich geladene Hintergrundbild verwendet und nur beim Vergrößern des Browserfensters größere Versionen des Hintergrundbildes nachlädt? (Ich möchte auf "min-resolution" etc. wegen mangelndem Browsersupport verzichten. Ebenfalls verzichten möchte ich auf Javascript. Ich bevorzuge eine reine CSS-Lösung, falls möglich.) Vielen Dank schonmal. Geändert von Andréé (27.01.2013 um 02:04 Uhr) |
Sponsored Links |
Stichwörter |
background, browser, hintergrundbild, responsive |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit z-index | Unearth | CSS | 10 | 23.04.2009 07:49 |
Überlappen des Rahmens bei einem floatenden Element verhindern | ONeill | CSS | 9 | 28.06.2006 17:25 |
Zeilenüberlappung bei margin-top mit negativem Wert | c.weber.os | CSS | 15 | 15.10.2005 16:11 |
des hundes hexenküche | derHund | http://csskueche.xhtmlforum.de/ | 10 | 19.05.2005 23:56 |
Ratschläge bei Publizierung eines fertigen Layouts gesucht | Black Fladder | CSS | 55 | 05.09.2004 15:30 |