Hintergrund-Bild in HTML Seite

Diskutiere Hintergrund-Bild in HTML Seite im HTML Forum im Bereich Programmierung; 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...
W

Warlazar

Member
Beiträge
10
Punkte Reaktionen
0
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

developr

Teammitglied
Beiträge
336
Punkte Reaktionen
0
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.
 
W

Warlazar

Member
Beiträge
10
Punkte Reaktionen
0
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 :p
 
developr

developr

Teammitglied
Beiträge
336
Punkte Reaktionen
0
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)">
 
W

Warlazar

Member
Beiträge
10
Punkte Reaktionen
0
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

developr

Teammitglied
Beiträge
336
Punkte Reaktionen
0
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>
 
W

Warlazar

Member
Beiträge
10
Punkte Reaktionen
0
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

developr

Teammitglied
Beiträge
336
Punkte Reaktionen
0
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.
 

Anhänge

  • projekt1.zip
    637,5 KB · Aufrufe: 2
W

Warlazar

Member
Beiträge
10
Punkte Reaktionen
0
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 :D

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

developr

Teammitglied
Beiträge
336
Punkte Reaktionen
0
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;">
 
W

Warlazar

Member
Beiträge
10
Punkte Reaktionen
0
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

developr

Teammitglied
Beiträge
336
Punkte Reaktionen
0
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.
 
Thema:

Hintergrund-Bild in HTML Seite

Oben Unten