Problem mit Grafikeinbindung

Der entsprechend CSS-Befehl lautet wie folgt:

background: #Hintergrundfarbe url(pfad zu dem Bild ausgehen vom Speicherort der CSS-Datei) no-repeat left bottom;

Korrekt angewandt könnte der Befehl so aussehen:

background: #FFFFFF url(images/content_bg.jpg) no-repeat left bottom;

Zur Erläuterung:
Zunächst wird die Hintergrundfarbe des Elements definiert. An der Stelle kann auch die Definition "transparent" oder "inherit" angewandt werden, damit die das Element die Farbe des übergeordneten Elements annimmt. Anschließend der Pfad zu dem Hintergrundbild, das angezeigt werden soll, releativ zum Speicherort der CSS-Datei. "no-repeat" bewirkt, dass das Bild nicht wiederholt wird und die Defintionen "left" und "bottom" richten das Bild unten links im Element aus. Detaillierte Informationen findest du hier.

Wir müssten nun den HTML-Code deines Blogs kennen, um erkennen zu können, welches Element mit dem Hintergrund versehen werden muss und welche Definitionen enthalten sein müssen. Also entweder verrätst du uns die URL zu deinem Blog oder du postest den HTML-Code (am Besten den erzeugten HTML-Code aus dem Browser heraus kopieren).

Du hast es auch fast richtig gemacht. In deiner CSS-Code-Wüste steht Folgendes:

#page {
background-image: url('images/daemon.jpg') bottom left;
background-color: black;
border: 1px solid #959596;
text-align: left;
}

Dein CSS-Code sagt dem XHTML-Code, dass das Element "page" ein Hintergrundbilder haben soll und eine Zeile später veranlasst dein CSS-Code, dass Element mit Schwarz zu füllen. Also entweder fasst du alle Definitionen für den Hintergrund in eine Zeile zusammen oder du führst alle Definitionen getrennt auf. Ein Mischmasch der Schreibweisen funktioniert nicht, zumindest dann nicht, wenn man es so macht, wie du es hier gemacht hast (als erst ein Bild in den Hintergrund legen und dann den Hintergrund doch wieder mit einer Farbe füllen). Der betreffende Abschnitt im CSS-Code muss wie folgt aussehen:

#page {
background: black url('images/daemon.jpg') no-repeat bottom left;
border: 1px solid #959596;
text-align: left;
}

Oder auch so

#page {
background-color: black;
background-image: url('images/daemon.jpg');
background-repeat: no-repeat;
background-position; bottom left;
border: 1px solid #959596;
text-align: left;
}

Ich bevorzuge die zusammen gefasste Schreibweise und so funktioniert es bei mir auch. Allerdings gibt es da noch ein Problem, denn in der Struktur des XHTML-Codes überlagert der Footer den Hintergrund und auch das Hintergrundbild. Ich würde nun die Struktur der Seite so ändern, dass der Footer nicht mehr in <div id="page">ganz viel content</div> erscheint sondern darunter. Du kannst aber auch den Holzhammer auspacken und an der Unterseite des Bildes eine schwarze Fläche, die der Höhe des Footers entspricht. Dies funktioniert auf jeden Fall und sollte nicht allzu schwierig sein.

Nur leider wird das Bild noch nicht richtig ausgerichtet, weil mir ein Schreibfehler unterlaufen ist. Die Zeile

background-position; bottom left;

muss so

background-position: bottom left;

aussehen (das Semikolon hinter dem Bezeichner in einen Doppelpunkt umwandeln), dann wird das Bild auch korrekt ausgerichtet und wirst erkennen, dass du das Bildnochmal bearbeiten musst.

Ok. mit Blick auf deinen Blog hätte ich noch einen Verbesserungsvorschlag. Und zwar ist der weiße Text auf dem Bild recht schwer zu lesen. Es geht zwar, aber auf Dauer wird das sicher unangenehm. Ich würde daher das Bild abdunkeln und den erwähnten Abstand unterhalb des Bildes einfügen. Und weil ich ohnehin gerade in Photoshop am schrauben bin, habe ich die vorgeschlagenen Änderungen für dich durchgeführt und dabei auch die Größe des Bildes (also das Datenvolumen) deutlich reduziert). Das Bild findest du im Anhang.