Bonjour à tous,

Je dois faire une page web constituée :
- d'une image en entête répétée une seule fois
- d'une image en corps répétée n fois sur laquelle du texte est positionné

Avec du css classique et du background, aucun souci. Sauf que la page doit être interprétée par un moteur qui n'accepte que les images en <img src="" />.

Et là je n'arrive absolument pas à répéter mon image centrale et à y positionner du texte dessus.

Solution qui marche avec du background CSS classique
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<html>
 
 
<body>
 
<table width="966px" cellpadding="0" cellspacing="0">
<!-- Haut -->
<tr height="250px">
 <td style="background-image: url('http://teslahost.com/images/header.jpg');"></td>
</tr>
 
<!-- Milieu -->
<tr>
 <td style="background-image: url('http://teslahost.com/images/middle.jpg');">
 
<div style="position:relative; left:40px; width:886px; text-align:justify; ">
 
<p style="font-family:arial; color:#57575F; font-size:13px;font-weight:bold;"><br/>
Mr Prenom Nom,
</p>
 
<p style="font-family:arial; color:#89146A; font-size:14px;font-weight:bold;">
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
</p>
 
</div>
 
</td>
</tr>
</table>
 
</body>
</html>
Aide bienvenue.

[EDIT] La solution me semble-t-il est dans la superposition de layer. Petite avancée donc en créant deux div qui se chevauchent, dont l'un est construit sur un onload en répétant dans une fonction la balise <img> sur une boucle javascript.
Ça marche, mais d'une part c'est moche et d'autre part je n'ai pas droit à du javascript.


Solution qui marche sans background CSS avec Javascript
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<html>
 
<head>
<script language="javascript">
function computeImage() {
 
var divh = document.getElementById('content').offsetHeight;
var repeat = Math.floor(divh/46)+2;
 
var texte = "<img src='http://teslahost.com/images/header.jpg'>";
for (i=1; i<repeat; i++) {
 texte = texte + "<img src='http://teslahost.com/images/middle.jpg'/>";
}
document.getElementById('image').innerHTML = texte;
}
 
</script>
</head>
 
<body onload="computeImage()">
 
<div id="image" style='position: absolute; top:15;width=966px; z-index:0;'></div>
 
<div id="content" style="position: absolute; top:265px; left:50px; width:886px; text-align:justify; " >
<p style="font-family:arial; color:#57575F; font-size:13px;font-weight:bold;"><br/>
Mr Prenom Nom,
</p>
 
<p style="font-family:arial; color:#89146A; font-size:14px;font-weight:bold;">
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
</p>
</div>
 
</body>
</html>