Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 27.01.2013, 01:50
Andréé Andréé ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.05.2012
Beiträge: 4
Andréé befindet sich auf einem aufstrebenden Ast
Standard 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;
}
Ich habe den CSS-Code zur Veranschaulichung auf 5 Abfragen vereinfacht, in Wirklichkeit sind es 15 Abfragen und 15 verschiedene Hintergrundbilder.

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)
Mit Zitat antworten
Sponsored Links