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.

**Bovino** · 24/10/2012, 14h34

Quand tu superposes des transparences, ben c'est sûr que le résultat est plus opaque...
Ensuite, si c'est juste l'ombrage que tu cherches à faire, pourquoi ne pas utiliser box-shadow qui est précisément fait pour ça ?

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

Merci pour ton aide.

Non, ce n'est pas juste l'ombrage, il s'agit bien d'image à proprement parler.
Il y en a une qui fait le haut du cadre, une autre le bas et une qui se répète en hauteur. Et j'ai pas mal de cas à traiter de cette manière dans le site.

Et ce que je vois avec le multiple background c'est que celle qui se répète au milieu se répète sur l'intégralité et recouvrant celle du haut et du bas.

Pourquoi la répatition ne se mets pas naturellement entre les deux qui sont fixées avec le no-repeat ?

Invité · 24/10/2012, 15h47

Bonjour,
un autre problème du background "multi-images" est qu'il n'est pas compatible avec les anciens navigateurs (IE7, IE8...).

Une solution simple "multi-div" :

Code css :

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
<style media="all" type="text/css">
#contenu {
	width:616px;
}
#contenu-top {
	background:url('/App_Themes/ModuleNews/commenthead.png') no-repeat center top, 
	height:10px;
}
#contenu-ctr {
	background:url('/App_Themes/ModuleNews/commentrepetable.png') repeat-y center center, 
	/* PAS DE HEIGHT ICI => extensible en hauteur */
	padding:5px 20px; /* décalage du texte */
}
#contenu-btm {
	background:url('/App_Themes/ModuleNews/commentfoot.png') no-repeat center bottom; 
	height:15px;
}
</style>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div id="contenu">
	<div id="contenu-top"></div>
	<div id="contenu-ctr">
	Du texte extensible dans la hauteur
	</div>
	<div id="contenu-btm"></div>
</div>

Cela dit, si ce que tu recherches est bien ce que tu as mis en image jointe (bords droits + ombrage),
c'est clair que tu as interêt à utiliser le CSS box-shadow !
Pour des bords arrondis, tu as aussi : border-radius.

Avantages ?
Aucune image à charger = temps d'affichage de la page diminué !

**zooffy** · 24/10/2012, 16h10

Merci pour ce code, je commançais à me dire que j'allais suivre cette piste.

Par contre j'ai tout de même un souci : ça fait pas le bon affichage, je poste une capture d'écran. J'ai bien relu et je ne vois pas de faute de frappe ou d'erreur particulière.

Le height je l'avais juste pour donner de la hauteur et voir, j'ai remplacer par des <br />

Enfin, non, ce n'est pas un ombrage mais bien des images à mettre. Sur d'autres parties du site c'est plus flagrand. Le designer travaille beaucoup sur l'alpha dans photshop du coup sans les images qui vont en dessous, ça se voit pas trop, mais c'est un cadre complet. J'ai essayé de négocier avec lui pour utiliser d'autre technique mais il est pire qu'n chanteur de Métal pour la négociation.....

Invité · 24/10/2012, 16h35

Manifestement, seul le background du div btm s'affiche.
Vérifie les chemins vers les images (background des divs top et ctr).

Plusieurs images dans un background

CSS

Vue hybride

Discussions similaires

Partager

Partager