Bild als Hintergrund für einen text

[Skippy]

ich aber auf ner Japanischen seite was gefunden

[ externes Bild ]

sowas würd ich mirauch gern in mein forum einbauen allerdings nicht das pro text ein Bild benötigt wird sondern das Bild als Hintergrund für einen text benutzt wird.

Nur stehe ich heute irgendwie auf dem Schlauch, ich weiss zwar das es geht aber mir will nicht mehr einfallen wie.

ich glaube ich muss das Bild in 3 teile zerlegen. habe ich das Richtig in erinnerung ? eimal den linken bereich dann den Mittelteil 1 pixel breit und den rechten teil.

Was wichtig ist das sich die breite am Text Orientiert.

ich möchte mir nämlich die großen nennen wirs mal überschriften so anpassen die einem immer anzeigen wo man ist z.b.
ich bin im Forum Coding & Technik dann steht ja oben rechts Coding & Technik einmal als große Überschrift.

So hoffe ihr könnt mir helfen wie das ungefähr codemäßig aussehen muss.


Und wenn die Zeit es zulässt was muss ich tun damit ich die

Code: Alles auswählen

class="catHead"

entsprechend abgeändert wird.(wenns überhaupt geht)

[Seimon]

eventuell so:

du machst eine tabelle mit 3 spalten

1. spalte hintergrund: linkes abschlussbild der sprechblase
2. spalte hintergrund: 1 pixel breiter mittelteil der sprechblase, vordergrund: text
3. spalte hintergrund rechtes abschlussbild der sprechblase

[Miriam]

Das wird nich ganz reichen. Meiner unmassgeblichen Meinung nach brauchst Du eine 3x3 Tabelle
Rundung links oben | Blasenoberkante | Rundung rechts oben
-----------------------------------------------------------------------
linke Blasenkante | Text | rechte Blasenkante
-----------------------------------------------------------------------
Rundung links unten | Blasenunterkante | Rundung links unten

Die langen Kanten soltest Du vllt mit CSS für die Tabelle formatieren (repeat-x, repeat-y) damit das auch für alle Grössen der Tabelle passt und die Grafik nicht gestreckt/gestaucht werden muss..

[Seimon]

Ist nur nötig wenn das Teil auch mehrzeiligen Text können muss

[Skippy]

Danke für die hilfe, habs dann hinbekomen mit nen bissl rumprobieren.

Funktioniert jedenfalls genau so wie ich mir das vorgestellt habe.

Falls nochjemand mal so wie ich auf dem Schlauch steht hier mal der dazugehörige Code

Code: Alles auswählen

   <table border="0" cellpadding="0" cellspacing="0">  
   <tr>
   <td background="./images/balloon_left.gif" width="13" height="36" align="center"></td>
   <td background="./images/balloon_center.gif" height="36" align="center">
     <span class="maintitle">
		  <a class="maintitle" href="{U_VIEW_TOPIC}">{TOPIC_TITLE}</a>
	   </span>
   </td>
   <td background="./images/balloon_right.gif" width="70" height="36" align="center"></td>
   </tr>
  </table>

Die größenangaben width und height müssen natürlich entsprechend der verwendeten grafiken angepasst werden