• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hintergrundbild

cranky123

Neues Mitglied
Hallo erstmal,

ich wollte fragen wie ich ein eigenes Bild von mir in HTML stellen kann. Ich habe zwar den Code gefunden aber bin bisschen durcheinander wie das gehen soll und wie das geht. ich haben den Code:

<html><head><title>background-repeat</title>
</head><body>

<div style="background-image:url(background4.jpg); background-repeat:repeat-x;
margin:30px; border:thin solid #CCCCFF; font-size:150%">
<p>Der erste Bereich.<br>Ein Text, der sehr leicht<br>umbricht...usw.</p>
</div>
<div style="background-image:url(background4.jpg); background-repeat:repeat-y;
margin:30px; border:thin solid #CCCCFF; font-size:150%">
<p>Der zweite Bereich.<br>Ein Text, der auch leicht umbricht....usw.</p>
</div>
<div style="background-image:url(background4.jpg); background-repeat:no-repeat;
margin:30px; border:thin solid #CCCCFF; font-size:150%">
<p>Der dritte Bereich.<br>Ein Text, der auch leicht umbricht...usw.</p>
</div>

</body></html>


Wo soll ich das Bild einfügen unter welchen Namen etc...
Was ihr gemacht habt bitte rot einfärben?!
Und was falsch ist.
 
Werbung:
Du musst im Style background-imge: url ("background.jpg"); eingeben

Alles ist berechenbar / Everything is calculable

Mach mir bitte mal ein Beispiel

<div style="background-image:url(background4.jpg); background-repeat:repeat-x;
margin:30px; border:thin solid #CCCCFF; font-size:150%">
<p>Der erste Bereich.<br>Ein Text, der sehr leicht<br>umbricht...usw.</p>
</div>
 
Werbung:
Na der Div-Tag hat doch schon ein Background URL angegeben da musst du nur deine Datei mit richtigem Pfad eingeben. Hier würde aber der Text über das Bild geschrieben.
Ansonsten nutzt den Img-Tag
Code:
<img src="deinbild.jpg"/>
 
Mit width und height:
Code:
<img src="deinbild.jpg" width="200px" height="200px"/>

Beachte das du das Bild vor dem hochladen schon verkleinerst. Zum einen wegen Speicherplatz zum andern wegen Ladezeit..
 
Werbung:
Ok, also Lokal musst du natürlich das Bild nicht verkleinern..

Falls du noch mehr mit HTML machen möchtest solltest du dir die Referenzen mal ansehen..
 
Werbung:
Werbung:
Werbung:
Aber das in den Bild schreiben. Wie ist das möglich?
Da wäre die einfachste Möglichkeit meiner Meinung nach wie du am Anfang schon geschrieben hattest ein Container mit Hintergrund und innerhalb einen Text.
Code:
<div style="background-image:url(deinbild.jpg), width: 200px, height: 200px">
<span>hier dein text</span>
</div>

Zusätzlich kannst du dem Span-Tag eine Hintergrund Farbe geben das der Text sich ein wenig vom Bild abhebt
Code:
<span style="background-color: #fff">

Wenn du ein größeres Projekt hast solltest du eine Sylesheet Datei einbinden und dort die Attribute Eintragen..
 
Werbung:
Wie oben schon beschrieben: Hintergrundbild per CSS setzen, der Text dann im Element. Schau dir den Quellcode der Seite doch an. Dort sieht man es.

HTML:
<section class="dark" id="header">
         <header>
           <h1>Ein Foto wird meistens nur angeschaut &ndash; selten schaut man in es hinein.</h1>
           <p>Fotografie ist und bleibt  : <a href="geserver.net/index.html">Kunst!</a></p>
         </header>
         <footer>
           <a class="button scrolly" href="#first">Ich zeige mehr als nur dein Profil.</a>
         </footer>
       </section>

Das Hintergrundbild hängt hier am #header.
 
Zurück
Oben