Hintergrundbild wird nur im sichtbaren Bereich gekachelt?

Steffen · 07.05.2007, 18:52

Habe eine kleine "Demoversion" meines Problems mal online gestellt:
Demo...

Eine Seite mit 2 div's: Ein "Content"-div, und innerhalb dieses contents ein weiterer DIV mit viel Inhalt, der ein gekacheltes Hintergrundbild besitzt (das weisse Papier mit Schatten).
Lustigerweise wird der Hintergrund nur im Sichtbarkeitsbereich des Browsers gekachelt, bei Scrollen fehlt unten jedoch der Hintergrund.

Wie gesagt, ist wirklich vom Sichtfeld des Browsers abhänging. Mache ich das Fenster klein, fehlt nachher umso mehr Hintergrund. (Der Fehler erscheint bei allen Browsern, immer exakt an der Browserkante)

Zur Fehlersuche habe ich mir als Hilfe eine Strichellinie um jeden DIV gelegt. Aber finde keine Lösung. Die grüne Linie um {body,html} erscheint komischerweise 2 mal an der Unterseite, einmal ganz unten wie es sein soll, aber auch zusätzlich an der besagten Problemstelle, also der Kante bevor gescrollt werden muss.

Lösungsvorschläge bitte möglichst zur bestehenden Struktur. Die Ein-/Aufteilung hat ihre Gründe und muss wirklich so bleiben. Habe nur zur besseren Verständlichkeit die Datei aufs wesentliche abgespeckt.

Hier das css:

Code:

* 		{ margin: 0; padding: 0;}

html, body {	background-color:#A8B0B7;
				background-image:url(../pics/txtrs/hgrund_verlauf_oben.jpg);
				background-repeat:repeat-x;
				height:100%; 
				border: 1px dashed green;}
			
#content {	position:relative;	
			width:996px;
			height:100%;
			margin-left:auto;
			margin-right:auto;
			background-image:url(../pics/txtrs/hgrund_weissesblatt.gif);
			background-repeat:repeat-y; 
			border:1px dashed yellow;}	
				
#blatt  {	position:absolute;
			top:145px;
			left:211px;
			width:590px;
			z-index: 2;
			border:1px dashed magenta;}

Und der HTML-Quellcode:

Code:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/test.css" rel="stylesheet" media="all" type="text/css" />
</head>

<body>

<div id="content">

  <center>
    <img src="pics/platzhalter.jpg" width="605" height="483" />
  </center>

  
<div id="blatt">
inhalt...... text text mit vielen Zeilenumbrüchen
</div>



</div>

</body>
</html>

Habe wirklich eeeewig probiert und bin mit dem Latein am Ende! Jetzt hoffe ich, dass mir hier eine/r von Euch CSS-Cracks weiterhelfen kann?!
Dank im Voraus!!!!

Steffen · 08.05.2007, 10:19

Danke Ingo, aber es klappt leider immer noch nicht

.
Dann erscheint unten überhaupt kein Hintergrund, hm.....

Ich habe alles mögliche versucht. Ein kleine Steigerung (?) konnte ich verbuchen: die Umrandung um den "DIV content" erscheint nun nicht mehr doppelt, wenn auch das Endergebnis noch bescheidener als vorher ist.

Hier zum anschauen:
Demo Nr.2

Der body (GRÜNE Strichellinie) sollte doch eigentlich die gesamte Fläche einnehmen?!
Die GELBE Strichellinie umrandet den DIV "content", der mit 100% Höhe angegeben ist. INNERHALB darin liegt DIV "blatt", PINK-gestrichelt mit dem vielen Text.

"blatt" müsste doch "content" auf die Höhe spreizen, weil er innerhalb "content" liegt?!??? Dann wäre mein eigentliches Problem gelöst, weil sich dann der Hintergrund zum Blattende kachelt.

Hab das css hier bei "Version 2" leicht geändert...

Code:

* 		{ margin: 0; padding: 0;}

body 		{	background-color:#A8B0B7;
				background-image:url(../pics/txtrs/hgrund_verlauf_oben.jpg);
				background-repeat:repeat-x;
				border: 1px dashed green;}

			
#content {	position:relative;	
			width:996px;
			height:100%;
			min-height:100%;
			margin-left:auto;
			margin-right:auto;
			background-image:url(../pics/txtrs/hgrund_weissesblatt.gif);
			background-repeat:repeat-y; 
			border:1px dashed yellow;}	
				
#blatt  {	position:absolute;
			top:145px;
			left:211px;
			width:590px;
			z-index: 2;
			border:1px dashed magenta;}

Steffen · 08.05.2007, 17:23

Hmmm... jetzt bin ich baff. Bevor ich mich dazu äußere muss ich erst mal meinen Rechtsanwalt anrufen ;-).... har har

Bin beruhigt, vielen Dank. Habe aber erst heute abend Zeit mich damit zu beschäftigen deshalb jetzt erst mal nur ein kurzes "Du bist gut!"
(Ich dachte deinen CSS-code-Vorschlag 1:1 verwendet zu haben - ohne Erfolg)
jedenfalls *freu freu freu*

Steffen · 08.05.2007, 21:57

So, hab wieder rumgedoktort und bin schon wieder frustriert. Aber erst mal dickes DANKE für deine Mühe, und Dein Besipiel!!!!!!!
Deine Idee funktioniert -nuuuuuuuuur wenn ich aber den (das oder die?) DIV #blatt hinzufüge, welches lebensnotwendig ist, wird der Hintergrund wieder nicht mehr gekachelt.

Das #blatt muss eben den oberen Teil teilweise überdecken und ich möchte /muss die Struktur so belassen - und glaube immer noch dran, dass das Problem im css gepackt werden kann

Wenn ich "position: absolute" entferne, wird der Hintergrund zwar wieder gekachelt, aber die Ebene sitzt dann halt nicht mehr richtig....

*grübel grübel*

Steffen · 09.05.2007, 11:07

Der Text u. Inhalt kommt auf den DIV #blatt (im Demo pink gestrichelt), und dieser muss über dem Rest liegen, also auch über der Grafik oben. Aber sobald dieser DIV #blatt dann wieder mit im Spiel ist, klappts mit dem Hintergrund nicht mehr

Und da #blatt ja innerhalb von #content liegt, müsste #content doch eigentlich durch die Überlänge von #blatt gespreizt werden