text ovanpå bild

HTML & CSS

5 svar · 356 visningar · startad av i-or 1 jan. 2002

i-orMedlem sedan nov. 2001294 inlägg

Frågan1 jan. 2002 19:44#1

Hur gör man för att få en text ovanpå en bild??

TengbladMedlem sedan dec. 19998 277 inlägg

1 jan. 2002 20:28#2

Du kan jue göra en table och lägga bilden i bakgrunden och sen bara skriva i tablen!

cazeMedlem sedan sep. 20016 059 inlägg

1 jan. 2002 22:55#3

Förstås...
Men går det på något sett att skriva en text över en bild utan att göra en tabell....???

jorgenMedlem sedan feb. 20012 412 inlägg

1 jan. 2002 22:57#4

Layers

Erik JuhlinMedlem sedan maj 200010 687 inlägg

1 jan. 2002 23:06#5

Man kan ju även skriva texten på bilden i Photoshop eller annat lämpligt bildbehandlingsprogram.

jarvkloMedlem sedan juli 20013 378 inlägg

2 jan. 2002 11:00#6

Du kan också använda CSS, det funkar i webbläsare med version >= 5.
Webbläsare med mindre bra CSS-stöd ser helt enkelt inte bilden.

<html>
<head>
<title>text över bild med CSS</title>
<style type="text/css">
<!--
.bakgrundsbild {
	background-image: url(bild.jpg);
/* en bild, centrerad bakom innehållet */
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
-->
</style>
</head>
<body>

<!-- bakgrundsbilden beskärs efter cellens bredd och höjd -->

<div class="bakgrundsbild">
Hej hopp i lingonskogen, 
Hej hopp i lingonskogen, 
Hej hopp i lingonskogen, 
Hej hopp i lingonskogen
</div>

<!-- Samma exempel, men med bredd och höjd angivna med CSS -->

<div class="bakgrundsbild" style="height:100px; width:100px">
Hej hopp i lingonskogen, 
Hej hopp i lingonskogen, 
Hej hopp i lingonskogen,
Hej hopp i lingonskogen
</div>

<!-- exemplet funkar också i de flesta andra taggar -->
<!-- (de som kan innehålla text) -->

<table border="1">
	<tr>
		<td class="bakgrundsbild">
Hej hopp i lingonskogen, 
Hej hopp i lingonskogen, 
Hej hopp i lingonskogen, 
Hej hopp i lingonskogen
		</td>
		<td class="bakgrundsbild">
Hej hopp i lingonskogen, 
Hej hopp i lingonskogen, 
Hej hopp i lingonskogen, 
Hej hopp i lingonskogen
		</td>
	</tr>

</table>
</body>
</html>