XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Verhindern des Nachladens von kleineren Hintergrundbildern (http://xhtmlforum.de/showthread.php?t=68804)

Andréé 27.01.2013 01:50

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.

MrMurphy 27.01.2013 08:09

Hallo,

Zitat:

Ich bevorzuge eine reine CSS-Lösung, falls möglich.)
Dafür gibt es keine reine CSS Lösung.

Gruss

MrMurphy

Manfred62 27.01.2013 10:40

ich denke, dies kann man eh vernachlässigen. I.d.R. werden die Browser ja nicht in der Größe verändert, sondern jeder geht mit seiner Voreinstellung auf die Seite. Die Besucher merken davon nichts.

Andréé 06.02.2013 17:10

Danke
 
Vielen Dank für Eure Antworten. Ich habe mich von Manfred62 überzeugen lassen und es dabei belassen.

Gruß
André(é)


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:50 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023