Plusieurs images dans un background

**zooffy** · 24/10/2012, 14h28

Bonjour à tous.

Je reprends une page à zéro parce que j'ai fais pas mal d'ereur dans mon montage et je commence par le début : le background des div.
Mon designer est assez exigeant et me force à faie des div extensible, soit en hauteur, soit en largeur avec deux côtés définis (haut et bas ou droite et gauche) et une trame répétable au milieu.

Au départ j'ai palcé deux images au dessus et en dessous du Div (pour l'extension verticale) mais je m'aperçois que c'est compliqué à positionner dans la page ensuite.

Du coup, j'ai cherché sur le net et j'ai trouvé un truc qui me parraissait bien mais qui ne donne pas le résutlat escompté. Visiblement la répétition de la trame se fait un poil trop.

Voici le code d'essai que j'ai pour l'instant :

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
 
<!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><title></title>
<style media="all" type="text/css">
#contenu {
background:
url('/App_Themes/ModuleNews/commenthead.png') no-repeat center top, 
url('/App_Themes/ModuleNews/commentrepetable.png') repeat-y center center, 
url('/App_Themes/ModuleNews/commentfoot.png') no-repeat center bottom; 
width:616px;
height:100px;
}
</style>
</head>
<body>
<div id="newsGlobal" style="width:1001px;z-index:1000;position:relative;background-image:url('/App_Themes/ModuleNews/fondrepetable.png');background-repeat:repeat-y;padding-left:10px;padding-left:100px;">
<br /><br /><br />
 
<div id="contenu">
Du texte extensible dans la hauteur
</div><br /><br /><br /><br /><br /><br /><br /><br /><br />
<img alt="" src="/App_Themes/ModuleNews/commenthead.png" />
<div style="height:100px;width:616px;background-image:url('/App_Themes/ModuleNews/commentrepetable.png');background-repeat:repeat-y;">
Le résultat que j'attends avec mon ancienne méthode.</div>
<img alt="" src="/App_Themes/ModuleNews/commentfoot.png" />                   
<br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</body>
</html>

Ne tenez pas compte du div Global, il est là juste pour que je n'ai pas un fond blanc.

Et voici donc la capture d'écran, le div du dessous étant ce que j'attend comme résultat.

Pourriez vous me dire si la méthode CSS3 que j'ai trouvé en valable pour ce que je veux faire et si oui, pourquoi j'ai ce débordement de la trame répétable ?

Sinon, que feriez vous pour obtenir le cade du bas de manière plus optimisée ?

Merci d'avance.

Plusieurs images dans un background

CSS

Mode arborescent

Discussions similaires

Partager

Partager