Frage stellen
ich probiere jetzt schon ne Weile an nem kleineren Problem rum - komm aber leider nicht richtig weiter.
Folgende Situation:
Ich habe mit Gimp einige Grafiken für die Homepage als interlaced (für gif) sowie als progressive (für jpg) erstellt. Ziel soll sein, dass auch User mit langsamen INet-Verbindungen die Bilder schon im Vorfeld langsam laden/aufbauen sehen.
Wenn ich ein Bild direkt als <img> in den Quelltext einbinde funktioniert dies auch so wie gewollt. Wenn ich allerdings mit DIV-Containern arbeite und diesen ein Hintergrundbild mit "background" zuweise wird das Bild nicht vorgeladen - es erscheint lediglich ne ganze Weile ein freier Bereich wo das Bild plaziert ist und erst wenn die Seite fertig geladen ist, ist auch das Bild dann schlussendlich sofort da - leider ohne nach-und-nach vorgeladen zu werden.
Hier mal ein Codebeispiel für einfaches einbinden einer Grafik in den Quelltext (das vorladen als interlaced oder progressive funktioniert damit):
- Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<img src="images/pic1.jpg" border="0" height="256" width="450">
</body>
</html>
Und hier der Code in Verbindung mit CSS wo das Prinzip leider nicht funzt.
- Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link media="screen" href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="container"></div>
</body>
</html>
Hier der CSS-Code in seperater Datei:
- Code: Alles auswählen
#container
{
z-index:2;
left:5px;
z-index:2;
position:relative;
top:5px;
font-family:verdana,sans-serif;
font-size:10pt;
text-decoration:none;
color:black;
background:url(../images/pic1.jpg) no-repeat;
width:884px;
height:150px;
}
Hab auch - glaube ich - schon versucht das "no-repeat" bei "background" wegzulassen bzw. "background" durch "background-image" zu ersetzen. Leider auch ohne Erfolg.
Wäre schön wenn mir jemand weiterhelfen könnte.
Danke im voraus schonmal.
