Hintergrund-Bild in HTML Seite

Warlazar · 08.04.2009

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

AW: Bg Befehlt

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

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

HTML:

<body>

... und mache daraus folgendes:

HTML:

<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

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

aber hier ist mal mein Quelltext!

HTML:

<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

developr · 08.04.2009

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:

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

Warlazar · 08.04.2009

developr schrieb:
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:

<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:

<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

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:

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

Übrigens sind da einige Fehler im Head-Bereich

, so muss es richtig sein.

HTML:

<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

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

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

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

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:

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

Oder:

HTML:

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

Oder:

HTML:

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

Warlazar · 08.04.2009

okay, und kann man das auch so machen das das bild im hintergrund stehen bleibt und nur die schrift herunter geht weißte wie ich des meine? also das bild soll stehen bleiben und dan kann ich weiter runterscrollen.... weißte? :S

developr · 08.04.2009

Ja, das geht mit background-attachment: fixed;.

HTML:

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

Wenn du magst, kann du nun noch das repeat-x, repeat-y oder no-repeat mit reinpacken.