| Statt einer Farbe können wir für den Hintergrund natürlich auch eine Grafik nehmen. Wie das funktioniert, zeige ich euch jetzt.
Wir nehmen eine Tabelle vom letzten Mal:
Bla, bla, bla Aufgrund von absoluter Hirnlosigkeit und mangelnder Kreativität steht hier nichts Interessantes. x) Blubb! Hier steht jetzt ein wenig mehr Text, damit man mehr vom Hintergrundbild sieht. XD Blubb, Blubb! Bla, blaaaa x) |
Um statt der Farbe eine Grafik als Hintergrund zu bekommen, fügen wir das hier ein: background-image: url(http://www.bildadresse.de) Es ist nicht nötig, background-color: #FFE599 zu löschen.
Ich habe jetzt mal irgendein Hintergrundbild eingefügt.
- Code:
[table style="border: 1px solid #ffffff; background-color: #FFE599; background-image: url(http://i29.servimg.com/u/f29/12/89/51/33/beispi10.jpg);"] [tr] [td]Bla, bla, bla Aufgrund von absoluter Hirnlosigkeit und mangelnder Kreativität steht hier nichts Interessantes. x) Blubb! Hier steht jetzt ein wenig mehr Text, damit man mehr vom Hintergrundbild sieht. XD Blubb, Blubb! Bla, blaaaa x)[/td] [/tr] [/table]
Und das Ergebnis:
Bla, bla, bla Aufgrund von absoluter Hirnlosigkeit und mangelnder Kreativität steht hier nichts Interessantes. x) Blubb! Hier steht jetzt ein wenig mehr Text, damit man mehr vom Hintergrundbild sieht. XD Blubb, Blubb! Bla, blaaaa x) |
Wenn ihr möchtet, dass sich das Hintergrundbild bei größeren Tabellen wiederholt, fügt ihr noch den Zusatz background-repeat: repeat ein. (Wobei ich mich schwach daran erinnere, dass dies automatisch passiert, wenn man ein Hintergrundbild einsetzt. Also wenn ihr das Hintergrundbild senkrecht und waagerecht wiederholen wollt, könnt ihr diesen Zusatz wohl auch weglassen.) Wollt ihr, dass das Bild sich nur waagerecht wiederholt, braucht ihr den Code repeat-x. Für eine senkrechte Wiederholung nehmt ihr repeat-y. Mit diesen Befehlen könnt ihr einige schöne Effekte erzielen. Zwei davon zeige ich jetzt.
Effekt mit repeat-x.
Hier eignen sich immer Verläufe sehr gut an. Diese könnt ihr leicht in eurem Bearbeitungsprogramm erstellen. Die Datei muss gar nicht groß sein. Ich nehme diese hier: https://i.servimg.com/u/f29/12/89/51/33/verlau10.jpg
- Code:
[table style="border: 1px solid #ffffff; background-color: #9675fd; background-image: url(http://i29.servimg.com/u/f29/12/89/51/33/verlau10.jpg); background-repeat: repeat-x;"] [tr] [td][color=white]Bla, bla, bla Aufgrund von absoluter Hirnlosigkeit und mangelnder Kreativität steht hier nichts Interessantes. x) Blubb! Hier steht jetzt ein wenig mehr Text, damit man mehr vom Hintergrundbild sieht. XD Blubb, Blubb! Bla, blaaaa x)[/color] [/td] [/tr] [/table]
Bla, bla, bla Aufgrund von absoluter Hirnlosigkeit und mangelnder Kreativität steht hier nichts Interessantes. x) Blubb! Hier steht jetzt ein wenig mehr Text, damit man mehr vom Hintergrundbild sieht. XD Blubb, Blubb! Bla, blaaaa x)
|
Effekt mit repeat-y.
Da kommt mir für ein Schreibforum gleich ein besonders schönes Beispiel in den Sinn. ^^ Dafür habe ich mir diesen Hintergrund von http://www.kneller-gifs.de/ gespeichert: https://i.servimg.com/u/f29/12/89/51/33/bg_rin10.gif Auf dieser Seite findet ihr noch viele andere schöne Hintergründe. Schaut euch einfach mal um. (:
- Code:
[table style="border: 1px solid #ffffff; background-color: #9675fd; background-image: url(http://i29.servimg.com/u/f29/12/89/51/33/bg_rin10.gif); background-repeat: repeat-y;"] [tr] [td]Bla, bla, bla Aufgrund von absoluter Hirnlosigkeit und mangelnder Kreativität steht hier nichts Interessantes. x) Blubb! Hier steht jetzt ein wenig mehr Text, damit man mehr vom Hintergrundbild sieht. XD Blubb, Blubb! Bla, blaaaa x) [/td] [/tr] [/table]
Bla, bla, bla Aufgrund von absoluter Hirnlosigkeit und mangelnder Kreativität steht hier nichts Interessantes. x) Blubb! Hier steht jetzt ein wenig mehr Text, damit man mehr vom Hintergrundbild sieht. XD Blubb, Blubb! Bla, blaaaa x)
|
Das sieht jetzt noch nicht so schön aus, ich weiß. Im nächsten Teil zeige ich euch, wie ihr das mit dem Abstand zwischen Rand und Text besser machen könnt. ^^
|