[phpBB2] Hintergrundbild im Beitrag

Hallo und guten Abend Forengemeinde.

Zu meiner Verteidigung will ich vorab bestätigen, dass ich die Suche bereits benutzt habe und auf diese beiden Themen auch aufmerksam wurde ( Thema 1 und Thema 2 ).

Doch die Codes, die dort Erwähnung fanden klappten leider nicht bei mir.

Ich probierte sowohl:

Code:


.post {
background-image: url("link");
background-repeat: no-repeat;
background-position: right bottom;
}

als auch

Code:


.postbody {
background-image: url("link");
background-repeat: no-repeat;
background-position: right bottom;
}

Aber keines von beiden funktionierte.

Ich habe ebenfalls firebug um Rat gefragt und er sagte mir, dass die Beiträge in row1 und row2 stecken.

Aber mit

Code:


td.row1 {
background-image: url("link");
background-repeat: no-repeat;
background-position: right bottom;
}

klappte es ebenfalls nicht.

Kann mir vielleicht einer sagen, was ich falsch mache?
Ich danke schon im Voraus für Eure Hilfe und verbleibe

mit freundlichen Grüßen
JARVIS

Hallo,

du musst auch immer auf die Versionspräfixe der Thementitel achten, ein Invision-Code funktioniert nur sehr selten auch für andere Versionen.

Du hast mit Firebug ja schon einen guten Ansatz gefunden. Dann solltest du sicher auch sehen: Jeder Beitrag besitzt zunächst die Klasse post und dann zwei td-Spalten/Zellen (Klasse row1/2).
Deshalb musst du nur diese beiden Infos, die du mit Firebug herausfindest, miteinander verbinden:
die Klasse post und die direkt untergeordneten td-Elemente

Code:

.post > td {
  background-image: url("BILDURL");
  ...
}

Die weiteren Eigenschaften (background-position, background-repeat...) kannst du je nach gewünschter Anzeige selbst hinzufügen.

Liebe Grüße
Günther

Hallo und guten Morgen, Günther.

Vielen Dank für deine schnelle Rückantwort.

Ich habe mich soeben noch mal an die CSS gesetzt und folgendes eingesetzt:

Code:

.post>td.row1 {
background-image: url("link");
background-repeat: no-repeat;
background-position: right bottom; }

.post>td.row2 {
background-image: url("link");
background-repeat: no-repeat;
background-position: right bottom; }

Aber irgendwie klappt das immer noch nicht. :X

Ich bitte meine Dummheit zu entschuldigen, bin aber noch nicht so fit in CSS, wie es für solche Veränderungen vielleicht wünschenswert wäre.

Du solltest es mal so machen, wie Günther es dir oben gepostet hat.

Günther schrieb:

Code:

.post > td {
  background-image: url("BILDURL");
  ...
}


Du hast zwei Fehler gemacht:
Vor und hinter das ">" Zeichen gehört ein Leerzeichen, und dann brauchst du nur der "td" Class die Eigenschaften zuweisen.
Es ist nicht notwendig dabei noch row1 und row2 getrennt anzusprechen.
Und wenn es trotzdem notwendig ist, dann kannst du beide Elemente auch durch ein Komma mit folgendem Leerzeichen gemeinsam ansprechen.

Code:

.post > td.row1, .post > td.row1 {
...
}


Eine Trennung ist nur notwendig, wenn du verschiedene Bilder zuweisen willst.
Warum benutzt du nicht den Code den Günther dir gegeben hat?
Er macht das nicht umsonst. Einfach kopieren und bei dir einsetzen und gegebenenfalls ergänzen.
Wenn du schon um Hilfe fragst, dann solltest du auch genau hinsehen, was du da machst.
Günter war nun schon so freundlich dir die Lösung fertig zu machen, so das du diese nur noch übernehmen brauchst, um dein Ergebnis zu erreichen.

Hallo Frank.

Ich möchte mich diesbezüglich erklären, wieso ich den Code, den Günther freundlicher Weise gepostet hat, nicht verwendet habe:

Zum einen habe ich ihn so ausprobiert; nur mit der entsprechenden URL zum Bild und sogar ohne die Beifügungen, wie Position oder Wiederholung.

Darüber hinaus habe ich die row eingefügt, weil ich die Elemente direkt ansprechen wollte. (Wenn ich den Rat von Günthe dahingehend missverstanden habe, tut es mir leid.)

Dass ich die Leerstellen weggelassen habe, beruht auf eine CSS Lektüre, die ich hier liegen habe, und die offenbar an dieser Stelle fehlerhaft ist. Das bitte ich zu entschuldigen.


Ich habe noch einmal alle Daten gemäß dem Code von Günther eingegeben und offenbar war die zu einfügende Bilddatei nicht kompatibel. Versuche mit einer anderen Datei haben geklappt; nun aber wird sowohl im Postbereich, als auch im Profilbereich (also Der Bereich mti dem Usernamen/Avatar/Beitragsanzahl) die Grafik ebenfalls eingeblendet.
Da beide über die Class "Post" eingebunden sind.
(Aber auch mit Row1/Row2)

Daraufhin habe ich es mit .postbody probiert, doch dabei verschiebt sich die Grafik bis zur letzten Zeile eines Postings und bleibt eben nicht in der Ecke.

Wäre es ratsamer, diese Grafik direkt ins viewtopic_body-Template einzubauen, damit es dort dauerhaft erscheint?

J.A.R.V.I.S. schrieb:Darüber hinaus habe ich die row eingefügt, weil ich die Elemente direkt ansprechen wollte. (Wenn ich den Rat von Günthe dahingehend missverstanden habe, tut es mir leid.)

Da hattest du meinen Beitrag falsch verstanden - wäre das nötig gewesen, hätte ich die Klassen schon auch noch hinzugefügt.
Auch bei den Leerräumen kannst du dich schon darauf verlassen, dass wir dir hier richtige Codes geben.

Aber du hast das Problem ja gefunden:

J.A.R.V.I.S. schrieb:Ich habe noch einmal alle Daten gemäß dem Code von Günther eingegeben und offenbar war die zu einfügende Bilddatei nicht kompatibel. Versuche mit einer anderen Datei haben geklappt

Wenn du jetzt noch erreichen möchtest, dass das Hintergrundbild nur in der rechten Beitragszelle (also die Profil-Spalte ausgenommen) angezeigt wird, dann kannst du das folgendermaßen definieren:

Code:

.post > td:last-child {
  background-image: url("BILDURL");
}

Erklärung: Jedem Beitrag (Klasse "post) sind zwei Spalten direkt (>) untergeordnet, einmal die Profilspalte und einmal die Spalte mit dem Beitragsinhalt. Möchtest du nur letztere ansprechen, kannst du deshalb diese Pseudoklasse verwenden:
http://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/strukturelle_Pseudoklasse/last-child

Auch hier kannst du je nach Typ des Hintergrundbilds bzw. nach Wunsch background-repeat, background-position oder auch background-size festlegen.
Damit sollte nun alles klar sein, oder?

Hallo Günther.

Vielen Dank für deine Rückantwort.
Und ja. Jetzt habe ich es verstanden.
first-child (linke Spalte); last-child (rechte Spalte).

Wurde eingetragen und funktioniert nun hervorragend.

Vielen Dank für deine Hilfe.

Mit freundlichen Grüßen
JARVIS

Freut mich, bitte.
Noch ein schönes Wochenende.
-closed-