zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Verhindern des Nachladens von kleineren Hintergrundbildern

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.01.2013, 00:50
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 01:04 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 27.01.2013, 07:09
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.065
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

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

Gruss

MrMurphy
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 27.01.2013, 09:40
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.138
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 06.02.2013, 16:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.05.2012
Beiträge: 4
Andréé befindet sich auf einem aufstrebenden Ast
Standard Danke

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

Gruß
André(é)
Mit Zitat antworten
Antwort

Stichwörter
background, browser, hintergrundbild, responsive

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit z-index Unearth CSS 10 23.04.2009 06:49
Überlappen des Rahmens bei einem floatenden Element verhindern ONeill CSS 9 28.06.2006 16:25
Zeilenüberlappung bei margin-top mit negativem Wert c.weber.os CSS 15 15.10.2005 15:11
des hundes hexenküche derHund http://csskueche.xhtmlforum.de/ 10 19.05.2005 22:56
Ratschläge bei Publizierung eines fertigen Layouts gesucht Black Fladder CSS 55 05.09.2004 14:30


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:51 Uhr.