Bild als Hintergrund einbinden

Nasri

Trainee

Posts: 12

Monday, August 31st 2009, 4:09pm

Bild als Hintergrund einbinden

Hallo,

Ich bin wie Ihr wohl seht neu hier und bin durch Zufall auf die Seite gestoßen, gefällt mir wirklich sehr gut.
Ich bin eigentlich mehr der Grafiker, beschäftige mich aber sehr gerne mit HTML, CSS und co. und tue dies nun auch schon recht lange.
Momentan bin ich dabei eine neue Homepage für mich zu machen und dort habe ich nun ein Problem wo ich euren Rat bräuchte.

Ich habe ein BIld(Header), ein weiteres als Navi, noch eins für den BG und ein weiteres Bild als den Zweiten BG(Dieser ist wie die Navi & der Header 960 Pixel groß und hängt unter der Navi).
Das Bild ist als .png vorhanden und sieht auch alles sehr gut aus, ich möchte jetzt allerdings auf dem Bild weitere Sachen wie Bilder oder einen Text ein binden.
Das geht ja allerdings nicht so einfach, da der BG ja ein Bild ist. Wie kann ich dies nun ändern? Ich habe gelesen ist sollte das BG BIld in eine Tabelle einbinden.

Damit Ihr besser seht wie es aus sieht ist hier der Link zur Vorabversion der Seite(Fürs testen etc.):
http://www.wwe-fans.de/Home.html
Es ist ja sehr offensichtlich was ich mit dem zweiten BG meine, das ist halt nun ein normales Bild wo ich weiteres Bilder oder Texte drauf machen will.

Hab das bezüglich der Tabelle mal probiert, der Quellcode sieht so aus(Bringt aber nix):

Quoted

<table border="0" width="960">
<tr style="background-color:000000">
<td><img src='HP_Background2.png' /></td>
</tr>
</table>

Bringt aber nichts, was ich mir auch gedacht habe. Gibt es überhaupt eine Möglichkeit dies per HTML/CSS oder so zu machen oder muss ich Bilder, Texte etc. direkt mit Photoshop auf den 2 BG machen?

Danke im Vorraus und LG,
Nasri

Torben Brodt

Administrator

Posts: 8,454

Monday, August 31st 2009, 7:42pm

ist das des Rätsels lösung?

HTML Code

<table border="0" width="960"> 
<tr>
<td style="background-color:000000;width:100px:height:100px;background-image:url('HP_Background2.png')">asdasd</td>
</tr>
</table>

du kannst natürlich noch für table, tr und td jeweils eigene Hintergrundbilder vergeben und in die Zelle auch noch ein Div mit Hintergrundbild und ein Div als Bild einfügen.
Damit hast du 5 Ebenen - wenn dir die nicht reichen musst du mit position:relative und position:absolute arbeiten.

Aber hak einfach nochmal nach, wenn dem so ist.

Allgemein sind Tabellenlayout out. Sie sind einfacher zu programmieren - aber wenn du was lernen willst, dann informier dich mal zu CSS Layouts:
Siehe http://de.selfhtml.org/css/layouts/einfuehrung.htm

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Nasri

Trainee

Posts: 12

Tuesday, September 8th 2009, 1:16pm

Hallo,

Sorry das ich mich erst jetzt melde. Ich hatte in derletzten Woche viel zu tun ^.^
Danke für den richtigen Code, jetzt funktioniert alles bestens.
Ich werde die Homepage erst einmal normal in HTML weiter machen und es dann mit bzw. in CSS "verfeinern"