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

Text über Bild

T

t3b123

Neues Mitglied
Hallo miteinander,

Ich bin ein grosser fan der website "GameOne". Ich frag mich nur wie die das mit dem Bild und diesem grauen Balken machen. Der text ist text und nicht im bild eingearbeitet.

ich währe forh, wenn mir jemand helfen könte.
bild-gamonejpg-103081-GameOne_Titel.htm
 
Zuletzt bearbeitet:
könntest du uns einen Screenshot machen, damit wir wissen, was du meinst. Ich weiß nämlich nicht, welchen grauen Balken du meinst.
 
HTML: 
<div style="background-image:url(Bild.jpg); width: 200px; height: 100px;">Hier dein Text</div>

Wäre die beste Lösung, die mir spontan dazu einfällt.
 
Hallo.

Deiner Beschreibung nach ist das ein Hintergrundbild auf das ein Text geschrieben wurde.
Siehe das Beispiel von EndOfGreen.

<p> wäre bei diesem Beispiel allerdings semantisch besser.

Gruss
Elroy
 
Hallo,

ich glaube das kommt der sache schon sehr nahe.

+ hintergundbild.jpg ist das große bild im Hintergrund, die göße des bildes muss mit dem Style .box passen oder umgedreht
+ halb_tranz_png.png ist das hinterm Text, also ein png was etwas tranzbarent ist.
Aufzeichnen.JPG

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
.box {
 position: relative;
 height: 390px;
 width: 340px;
}
 
.box_text {
 position: absolute;
 left: 0px;
 bottom: 0px;
 width: 100%;
 background-image:url(halb_tranz_png.png);
 background-repeat: repeat;
}
</style>
</head>
<body>
<div class="box">
  <div class="box_text">
    <h1>Überschrift</h1>
    <p>kleiner text bla</p>
   </div>
 <a href="#"><img src="hintergundbild.jpg" width="340" height="390" /></a>   
</div>
</body>
</html>

Cheffchen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben