background-image flackert bzw. wird unter firefox immer neu geladen

**kevx82** · 21. 11. 2011, 02:42

Hallo zusammen!

Ich erstelle grad eine kleine Homepage für einen Freund. Die Seite wird mit HTML und CSS erstellt. Da ich das noch nie gemacht habe, musste ich mich erstmal ein wenig hineinarbeiten.
Bisher hat alles ganz gut geklappt und ich konnte die Sachen, die schon fertig waren, meinem Freund zeigen.
Als er die einzelnen Links durchklickte meinte er, dass das Hintergrundbild(Logo) und ein Hintergrundbild eines div Containers beim laden flackert bzw. neu geladen werden. Bei mir kam dieses Problem nicht, was mich ein wenig verwundert hat. Ich benutze Chrome auf Mac OS X und er Firefox auf Windows 7. Anschließend habe ich dann Safari und Firefox getestet und gesehen, dass dieses Flackern/Laden nur unter Firefox geschiet.
Die Dateien befanden sich bei uns auf dem Lokalen Datenträger und sind auch nur wenige kilobyte groß. Die Bilder werden per CSS geladen, wie auch die background-images der Links, diese aber nicht beim Laden flackern.

Code:

body {
...
background: url("img/logo_beige.png") no-repeat fixed center top #FFF8DC;
...
}

Code:

#content {
	display: block;
	margin-top: 90px;
	margin-left: 120px;
	height: 400px;
	width: 850px;
	background: url("img/cube_big.png") no-repeat;
	background-size: 850px 400px;

}

Ich habe dann in Foren gesucht ob jemand das gleiche Problem hat, aber leider nichts gefunden was mir genau erklären konnte wieso das bei Firefox flackert und bei Chrome und Safari nicht.

Hier ist nochmal der Quellcode von den html-seiten

Code:

<!DOCTYPE html>
<html lang="de">
<head>
  <title>Title der Seite</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <link rel="Stylesheet" type="text/css" href="style.css">
</head>

<body>
	<header>
		<h1></h1>
	</header>
	<nav>
		<ul>
			<li class="current"><a href="home.html">Home</a></li>
			<li class="news"><a href="news.html">News</a></li>
			<li class="about"><a href="about.html">About</a></li>
			<li class="shop"><a href="shop.html">Shop</a></li>
			<li class="contact"><a href="contact.html">Contact</a></li>
		</ul>
	</nav>
	<div id="content">
		<section>
			<h2>Willkommen</h2>
		</section>
		<div id="maincontent">
			<section>
				<p>Text</p>
			</section>	
		</div>
		<sidebar>	
			<img src="img/foto_welcome.png">
		</sidebar>
	</div>	
	<footer>
	</footer>
</body>
</html>

Das Image "foto_welcome.png" flackert nicht, wenn ich einen der Links drücke.
Müsste ich vielleicht das Hintergrundbild(Logo) und Hintergrundbild für den Text auch in die HTML-Datei einbauen und per CSS anschließend die Eigenschaften zuweisen??
Vielen Dank schon mal für eure Aufmerksamkeit und vielleicht auch Hilfe.

Gruß

Kevx

**aNtiCHrist** · 21. 11. 2011, 15:33

Was meinst du mit Flackern? Dass beim Wechsel der Seite der Inhalt neu aufgebaut wird, lässt sich kaum vermeiden. Je nach den Einstellungen in den Browsern kann es dabei teilweise zur Darstellung einer unvollständigen Seite kommen, nämlich dann, wenn die Darstellung schon erfolgt, während die Inhalte noch nicht vollständig verarbeitet werden konnten. Auf diesen Effekt kann man serverseitig nur begrenzt Einfluss nehmen, da er im wesentlichen von den Einstellungen im Browser und der Netzanbindung abhängt. Man kann allerdings stärkere Helligkeitsschwankungen unterbinden, indem man per CSS eine ähnliche Hintergrundfarbe für Bereiche definiert, in denen Hintergrundbilder zum Einsatz kommen sollen. Das ist eh sinnvoll, damit die Seite auch ohne Bilder möglichst gut nutzbar ist und es dann nicht zu Situationen wie z. B. weiße Schrift auf weißem Hintergrund kommt.

Ohne einen Link zu einer Beispielseite wird man zu deinem konkreten Problem kaum näheres dazu sagen können.

**r4wi** · 14. 12. 2011, 11:00

Serverseitige caching header senden hilft da.
oder statische Dateien (Bilder scripts ect.) über ein (cdn) Content delivery network einbinden welches aggressiv cached.

lass doch mal per pagespeed deine Seiten analysieren.