Répéter une image sans background(url)

Version imprimable

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:

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:

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>

08/03/2011, 09h01
Candygirl

Hello,

Elle ressemble à quoi ton image ? Est-ce qu'un étirement ne pourrait pas donner le même résultat qu'une répétition ?
08/03/2011, 09h58
lepas33

Bonjour Candy,

Une image du type "http://teslahost.com/images/middle.jpg" cad effectivement qu'elle pourrait peut-être être étirée.
Par contre, il faut pouvoir l'étirer sur toute la hauteur d'un texte variable. Et je n'ai pas droit à du javascript pour calculer une taille par exemple.

Tu peux faire copier/coller des deux exemples précédents dans un .html pour voir ce que ça donne.

Tu peux faire qqch comme ça:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	#main,p {position:relative;}
	#main {width:966px;}
	p {padding:1em 40px;}
	img {position:absolute;top:0;left:0;height:100%;width:100%;}
 
</style>
</head>
<body>
<div id="main">
	<img src="images/middle.jpg" alt="" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at augue eget mi bibendum aliquam sed rutrum ipsum. Sed porttitor nibh et diam ultricies et accumsan est dignissim. Pellentesque ac dictum metus. Aenean vel sapien leo, ullamcorper tincidunt sem. Sed bibendum purus quis nisl sollicitudin venenatis cursus massa blandit. In vulputate turpis quis eros pretium rutrum. Aenean blandit malesuada placerat. Mauris augue urna, aliquam sed fermentum sed, eleifend at purus. Aenean sapien lorem, sollicitudin et molestie in, feugiat sit amet velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In feugiat convallis lobortis. Pellentesque venenatis augue eget erat luctus venenatis. Nulla a libero eget enim dignissim bibendum. Nullam vitae massa id nibh auctor mollis vitae at eros. Proin tempus lectus vel turpis blandit rhoncus. Sed semper, neque a porttitor feugiat, ligula nunc vestibulum mauris, ultrices porttitor ante justo semper nunc. Nunc tincidunt orci vel lacus imperdiet ac porta magna pretium. Curabitur imperdiet massa non ipsum bibendum a rutrum urna pellentesque. Sed ultricies, augue in aliquet dapibus, tortor diam elementum orci, ut ultricies metus dui at leo. </p>
</div>
</body>
</html>

Mais un simple border et background-color ne te sont-ils pas permis ?

08/03/2011, 13h35
lepas33

J'ai le droit au border et background-color mais le fond sur lequel le texte s'affiche est plus complexe qu'un coloriage HTML.

J'ai tenté ton code : il fonctionne sous FF3.6 mais pas sous IE6 où l'image ne s'adapte pas à la longueur du paragraphe. En tout cas, ton idée d'alongement de l'image en hauteur semble très prometteuse.
08/03/2011, 14h10
Candygirl
Pour IE6, j'aurais envie de dire: OSEF ;)

Si cela fait partie de ton cahier des charges, tu devrais pouvoir régler le pb en ajoutant:
Code:

1 2 3 4 5 
mais cela ne fonctionnera pas si javascript est désactivé, il me semble.
08/03/2011, 18h37
lepas33

Merci Candy. Je vais voir si ca passe sous Outlook. J'avais tenté du javascript embedded qui avait été refusé pour des soucis de sécurité mais bon ça se tente.
En tout cas, merci beaucoup de ton aide et de ta réactivité.