Hintergrund-Bild in HTML Seite

Warlazar · 08.04.2009, 11:00

Sers an alle,

ich arbeite schon etwas länger daran mir meine eigene seite zu basteln, ich hab immer und immer wieder neue seiten kreiert um mir das ganze einzuprägen, nur bei dem BG befehl habeihc leichte Probleme. Das Bild was ich als Hintergrund haben will is auch in dem ordner wo das eig. Projekt drin is. Nur leider finde ich den genauen Befehl dafür nicht! Ich hoffe das ihr mir helfen könnt obwohl hier noch nich so viel los is!

MFG

Warlazar

***developr*** · 08.04.2009, 11:27

Am einfachten ist es nun, das einfach mit CSS zu realisieren.

Suche in deinem HTML-Dokument nach dem Body-Tag.

HTML-Code:

<body>

... und mache daraus folgendes:

HTML-Code:

<body style="background-image:url(/der/pfad/zu/deinem/bild.jpg)">

Versuche es mal. Sollte es nicht funktionieren, poste hier mal deinen Quelltext.

Warlazar · 08.04.2009, 11:43

Natürlich wie sollte es auch anders sein, klappt es nicht so wie ich es will!

aber hier ist mal mein Quelltext!

HTML-Code:

<html>

<title> Hompage Seite Eins</title>

<head> !!Meine seite um zu lernen!! </head>

<body style="background-image:url(C:\Users\XXX\Desktop\Html\bild.jpg)">

<p> hier steht mein text</p>

<p><i> Und nun müsste diese zeile in Kurisiv sein.
</i></p>

<p><small>Dies sollte nun in etwas kleinerer Schriftart sein!
</small></p>


<p> Hier schreibe ich jez in einer zeile <br> und nun schreibe ich in der Zeile darunter!</br>
<hr/>

<ol>
  <li>nummer eins?</li>
  <li>nummer zwei</li>

<a href="Projekt2.html"> Seite Zwei</a> <a href="Projekt2.html"> Seite Drei</a> <a 

href="Projekt2.html"> Seite Vier</a


</body>
</html>

natürlich habe ich das bei den !pjojekten schon geändert weil da ja überall Projekt 2 steht und die 3 und 4 :P

***developr*** · 08.04.2009, 11:49

Der Pfad zu deinem Bild ist falsch. Der Pfad muss immer relativ angegeben werden.
D.h. wenn dein HTML-Dokument und dein Bild auf deinem Desktop liegt, dann brauchst du nur das Bild ohne Pfad angeben. Wenn das Bild im Unterordner images liegt, dann wäre der Pfad images/bildd.jpg.

Kopier dein Hintergrundbild mal in das selbe Verzeichnis, in das auch deine HTML-Datei liegt und verändere den Body-Tag wie folgt:

HTML-Code:

<body style="background-image:url(bild.jpg)">

Warlazar · 08.04.2009, 11:58

Zitat:

Zitat von developr

Der Pfad zu deinem Bild ist falsch. Der Pfad muss immer relativ angegeben werden.
D.h. wenn dein HTML-Dokument und dein Bild auf deinem Desktop liegt, dann brauchst du nur das Bild ohne Pfad angeben. Wenn das Bild im Unterordner images liegt, dann wäre der Pfad http://www.html-forum.de/images/bildd.jpg.

Kopier dein Hintergrundbild mal in das selbe Verzeichnis, in das auch deine HTML-Datei liegt und verändere den Body-Tag wie folgt:

HTML-Code:

<body style="background-image:url(bild.jpg)">

also ich habs gemacht und habe leider kein erfolg gehabt, ich hatte es auf dem desktop ein ordner der Html hieß, nun habe ich es eifach alles auf den Dektop gemacht, also die 4 Projekte und das bild mit dem namen "bild.jpg" aber das geht iwie net.

nun schreibe ich es nochmal alles rein wie es in meinem Editor steht.

HTML-Code:

<html>

<title> Hompage Seite Eins</title>

<head> !!Meine seite um zu lernen!! </head>

<body style="background-image:url(bild.jpg)">


<p> So nun habe ich ein paar Zeilen geschrieben in normaler Farbe und Schriftart!
</p>

<p><i> Und nun müsste diese zeile in Kurisiv sein.
</i></p>

<p><small>Dies sollte nun in etwas kleinerer Schriftart sein!
</small></p>


<p> Hier schreibe ich jez in einer zeile <br> und nun schreibe ich in der Zeile darunter!</br>
<hr/>

<ol>
  <li>nummer eins?</li>
  <li>nummer zwei</li>

<a href="Projekt2.html"> Seite Zwei</a> <a href="Projekt2.html"> Seite Drei</a> <a 

href="Projekt2.html"> Seite Vier</a

nun sage mir mal was ich daran falsch gemacht habe

***developr*** · 08.04.2009, 12:33

Das Hintergrund-Bild mit dem Namen bild.jpg existiert, richtig?

Erstelle dir auf deinem Desktop mal einen Ordner "Webseite" oder ähnlich. Kannst du im Grunde nennen, wie du möchtest. In diesen Ordner kopierst du deine HTML-Dateien und auch dein Hintergrund-Bild. Das Hintergrund-Bild hat den Dateinamen bild.jpg (ist es ein JPG oder ein GIF?).

Dann sollte es mit diesem Body-Tag funktionieren.

HTML-Code:

<body style="background-image:url(bild.jpg)">

Übrigens sind da einige Fehler im Head-Bereich :-), so muss es richtig sein.

HTML-Code:

<html>
<head>
<title>Hompage Seite Eins</title>
</head>
<body style="background-image:url(bild.jpg)">
<p>hier steht mein text</p>
<p><i> Und nun müsste diese zeile in Kurisiv sein.</i></p>
<p><small>Dies sollte nun in etwas kleinerer Schriftart sein!</small></p>
<p> Hier schreibe ich jez in einer zeile <br> und nun schreibe ich in der Zeile darunter!</p>

<hr/>

<ol>
  <li>nummer eins?</li>
  <li>nummer zwei</li>
</ol>

<a href="Projekt2.html"> Seite Zwei</a> <a href="Projekt2.html"> Seite Drei</a> <a href="Projekt2.html"> Seite Vier</a>

</body>
</html>

Warlazar · 08.04.2009, 12:43

Ich hab jez ein Ordner erstellt mir dem namen Webseite.

Ich habe alle meine Dateien in den Ordner Kopiert und auch das bild.

Das bild heißt "bild.jpg" und ja es is ein JPG format.

Ich hab alles im Ordner drin, habs reinkopeirt wie du es geschrieben hast, gespeichert und gestartet. Aber mein hintergrund ist immernoch weiß....

Was heißt da waren einige Fehler drin? in der anordnung oder wie meinste das?

Naja aufjedenfall klappt des immernoch nich =( entweder es liegt an etwas was ich vergessen habe oder ich bin zu blöd =((((

Hat die größe des bildes etwas damit zu tun?

***developr*** · 08.04.2009, 12:52

Ich hab es eben getestet und hänge dir die Dateien hier an.
Entpacke das Verzeichnis mal auf deinem Desktop und starte die projekt1.html :-).

Nun bin ich gespannt, also bei mir funktioniert es.

Warlazar · 08.04.2009, 12:59

ja danke, nun habe ich auch meinen fehler gefunden... der war das auch da bild "bild.jpg" hieß und das es auch im editopr so hieß, aber scheißnbar muss es aufm desktop nur "Bild" heißen und im editor "bild.jpg"^^

danke ich habs

nur jez is mein bild 3mal nebeneinander un dnich gestreckt weißt du was ich meine?

***developr*** · 08.04.2009, 13:11

Hintergründe lassen sich leider (oder zum Glück :-)) nicht strecken.
Das Hintergrund-Bild muss die Größe haben, wie du sie brauchst.

Falls dein Hintergrund-Bild ein Muster ist, kannst du es aber auch "wiederholen" lassen.

Versuche mal beide Sachen und schau dir das Ergebnis an.

HTML-Code:

<body style="background-image:url(bild.jpg); background-repeat:repeat-x;">

Oder:

HTML-Code:

<body style="background-image:url(bild.jpg); background-repeat:repeat-y;">

Oder:

HTML-Code:

<body style="background-image:url(bild.jpg); background-repeat:no-repeat;">

08.04.2009, 11:00	#1
Warlazar Neuer Benutzer Registriert seit: 08.04.2009 Beiträge: 10	Hintergrund-Bild in HTML Seite Sers an alle, ich arbeite schon etwas länger daran mir meine eigene seite zu basteln, ich hab immer und immer wieder neue seiten kreiert um mir das ganze einzuprägen, nur bei dem BG befehl habeihc leichte Probleme. Das Bild was ich als Hintergrund haben will is auch in dem ordner wo das eig. Projekt drin is. Nur leider finde ich den genauen Befehl dafür nicht! Ich hoffe das ihr mir helfen könnt obwohl hier noch nich so viel los is! MFG Warlazar

08.04.2009, 11:27	#2
*developr* Administrator Registriert seit: 11.11.2008 Ort: Bremen Beiträge: 268	AW: Bg Befehlt Am einfachten ist es nun, das einfach mit CSS zu realisieren. Suche in deinem HTML-Dokument nach dem Body-Tag. HTML-Code: <body> ... und mache daraus folgendes: HTML-Code: <body style="background-image:url(/der/pfad/zu/deinem/bild.jpg)"> Versuche es mal. Sollte es nicht funktionieren, poste hier mal deinen Quelltext.

08.04.2009, 11:49	#4
*developr* Administrator Registriert seit: 11.11.2008 Ort: Bremen Beiträge: 268	AW: Hintergrund-Bild in HTML Seite Der Pfad zu deinem Bild ist falsch. Der Pfad muss immer relativ angegeben werden. D.h. wenn dein HTML-Dokument und dein Bild auf deinem Desktop liegt, dann brauchst du nur das Bild ohne Pfad angeben. Wenn das Bild im Unterordner images liegt, dann wäre der Pfad images/bildd.jpg. Kopier dein Hintergrundbild mal in das selbe Verzeichnis, in das auch deine HTML-Datei liegt und verändere den Body-Tag wie folgt: HTML-Code: <body style="background-image:url(bild.jpg)">

08.04.2009, 12:33	#6
*developr* Administrator Registriert seit: 11.11.2008 Ort: Bremen Beiträge: 268	AW: Hintergrund-Bild in HTML Seite Das Hintergrund-Bild mit dem Namen bild.jpg existiert, richtig? Erstelle dir auf deinem Desktop mal einen Ordner "Webseite" oder ähnlich. Kannst du im Grunde nennen, wie du möchtest. In diesen Ordner kopierst du deine HTML-Dateien und auch dein Hintergrund-Bild. Das Hintergrund-Bild hat den Dateinamen bild.jpg (ist es ein JPG oder ein GIF?). Dann sollte es mit diesem Body-Tag funktionieren. HTML-Code: <body style="background-image:url(bild.jpg)"> Übrigens sind da einige Fehler im Head-Bereich :-), so muss es richtig sein. HTML-Code: <html> <head> <title>Hompage Seite Eins</title> </head> <body style="background-image:url(bild.jpg)"> <p>hier steht mein text</p> <p><i> Und nun müsste diese zeile in Kurisiv sein.</i></p> <p><small>Dies sollte nun in etwas kleinerer Schriftart sein!</small></p> <p> Hier schreibe ich jez in einer zeile <br> und nun schreibe ich in der Zeile darunter!</p> <hr/> <ol> <li>nummer eins?</li> <li>nummer zwei</li> </ol> <a href="Projekt2.html"> Seite Zwei</a> <a href="Projekt2.html"> Seite Drei</a> <a href="Projekt2.html"> Seite Vier</a> </body> </html>

08.04.2009, 12:43	#7
Warlazar Neuer Benutzer Registriert seit: 08.04.2009 Beiträge: 10	AW: Hintergrund-Bild in HTML Seite Ich hab jez ein Ordner erstellt mir dem namen Webseite. Ich habe alle meine Dateien in den Ordner Kopiert und auch das bild. Das bild heißt "bild.jpg" und ja es is ein JPG format. Ich hab alles im Ordner drin, habs reinkopeirt wie du es geschrieben hast, gespeichert und gestartet. Aber mein hintergrund ist immernoch weiß.... Was heißt da waren einige Fehler drin? in der anordnung oder wie meinste das? Naja aufjedenfall klappt des immernoch nich =( entweder es liegt an etwas was ich vergessen habe oder ich bin zu blöd =(((( Hat die größe des bildes etwas damit zu tun?

08.04.2009, 12:59	#9
Warlazar Neuer Benutzer Registriert seit: 08.04.2009 Beiträge: 10	AW: Hintergrund-Bild in HTML Seite ja danke, nun habe ich auch meinen fehler gefunden... der war das auch da bild "bild.jpg" hieß und das es auch im editopr so hieß, aber scheißnbar muss es aufm desktop nur "Bild" heißen und im editor "bild.jpg"^^ danke ich habs nur jez is mein bild 3mal nebeneinander un dnich gestreckt weißt du was ich meine?

08.04.2009, 13:11	#10
*developr* Administrator Registriert seit: 11.11.2008 Ort: Bremen Beiträge: 268	AW: Hintergrund-Bild in HTML Seite Hintergründe lassen sich leider (oder zum Glück :-)) nicht strecken. Das Hintergrund-Bild muss die Größe haben, wie du sie brauchst. Falls dein Hintergrund-Bild ein Muster ist, kannst du es aber auch "wiederholen" lassen. Versuche mal beide Sachen und schau dir das Ergebnis an. HTML-Code: <body style="background-image:url(bild.jpg); background-repeat:repeat-x;"> Oder: HTML-Code: <body style="background-image:url(bild.jpg); background-repeat:repeat-y;"> Oder: HTML-Code: <body style="background-image:url(bild.jpg); background-repeat:no-repeat;">

Themen-Optionen	Thema durchsuchen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen	Thema durchsuchen: Erweiterte Suche