Tekst na Obrazku div


(Feel X44) #1

Witam czy może mi ktoś zrobić napis na tym obrazku ? niżej podaje css/html/

 

 

tak aby na obrazku moża było wprowdzić napis.


(KamilDz) #2

Zrób w paincie, będzie działać wszędzie!


(Jim1961) #3

Pod IMG dodaj SPAN albo DIV o klasie "text-on-picture" i dla tej klasy zdefiniuj m.in. position absolute oraz z-index:10. Dla #Game-50_ i dla #Game-50 position: relative, i dodatkowo dla obrazka z-index: 5.


(Feel X44) #4

Możesz mi to zrobić


(Qrzysio) #5
<style type="text/css">
#Game-50_ { position:absolute;left:488px;top:339px;width:178px;height:36px; }
span.napis { display:block;position:absolute;bottom:0;left:0;text-align:center;z-index:10000;width:100%; }
</style>


<div id="Game-50_">
<img id="Game_50" src="images/Game_50.png" width="178" height="36" alt="" />
<span class="napis">to jest napis na obrazku</span>
</div>

Podstawowy trick.


#6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Menu 100% strony</title>
<style type="text/css">
 html {background-color:#ccc;}
    body {max-width: 320px; margin:20px auto; padding:0; background-color:#fff;}
 .img {display: block;width: 320px;height: 240px;background: #ccc url(laka.jpg) top center no-repeat;}
 h1, p {font-family: Arial;text-shadow: 1px 1px white;margin:0;padding:0;text-align:center;}
 h1 {padding: 30px 0;}
</style>
</head>

<body>
 <div class="img">
  <h1>jakiś nagłówek</h1>
  <p>Jakiś tekst</p>
 </div>
</body>
</html>

Taki jest to efekt:

div-z-log_eexhaea.PNG

 

Tak jest to najprościej zrobić wstawiać obrazek w diva jako background.