Plusieur background-image dans la meme class
Bonjour, voila, en fait un probleme ce pose a moi ! je voudrais savoir si il est possible dans une seul class de mettre plusieur background-image ?
Je m'explique, j'ai donc : btg.png (top) bmg.png (milieu qui ce repete) et bbg.png (foot),
qui donne :
http://www.produitsdesavoie.com/images/btg.png
http://www.produitsdesavoie.com/images/bmg.png
http://www.produitsdesavoie.com/images/bbg.png
et j'ai donc fais plusieur div pour quel s'affiche correctement, mais le probleme c'est que le texte qui est dessus doit s'afficher sur la top et la milieu (commencer sur la top et le milieu s'agrandi si il ya besoin), et donc je vois pas comment faire ...
donc en fait, un premier probleme ce pose a moi, avec cette solution, les images en arriere plan ne s'affiche meme pas ... et la je vois pas pourquoi ... :
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
/* Bloc Nouveaute
-------------------------------------------------------- */
.blocnouveau {
float: right;
width: 150px;
margin: 0;
margin: 0;
margin-top: 5px;
margin-right: 10px;
margin-bottom: 0;
margin-left: 0px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 2px;
/* background-color: #0066CC;
border-top-width: 3px;
border-top-style: solid;
border-top-color: #12335b;
border-right-width: 3px;
border-right-style: solid;
border-right-color: #12335b;
border-left-width: 3px;
border-left-style: solid;
border-left-color: #12335b;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #12335b; */
}
.produitPetitnouveau {
float: left;
width: 150px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0;
margin-left: 0;
padding: 0;
}
#imageprodnouveau {
float: left;
margin-left: 0px;
}
.contourImagenouveau {
border: 1px solid #12335b;
margin-bottom: 0px;
float: left;
}
.titreProduitnouveau {
color: #12335B;
text-align: center;
font-weight: bold;
margin-top: 5px;
margin-bottom: 5px;
width: 100%;
}
.chapoProduitnouveau {
color: #12335B;
text-align: left;
font-style: italic;
font-size: 0.9em;
line-height: 1.2em;
margin-bottom: 5px;
width: 100%;
}
.prixProduitnouveau {
font-size: 14px;
color: #a9c9e9;
text-align: right;
font-weight: bold;
margin-top: 5px;
}
a.LIEN_commandernouveau:link {
font-size: 12px;
color: #a9c9e9;
text-align: center;
text-decoration: none;
font-weight: bold;
}
a.LIEN_commandernouveau:visited {
font-size: 12px;
color: #a9c9e9;
text-align: center;
text-decoration: none;
font-weight: bold;
}
a.LIEN_commandernouveau:hover {
font-size: 12px;
color: #a9c9e9;
text-align: center;
text-decoration: underline;
font-weight: bold;
/* fond des bloc gauche
----------------------------------------------------------*/
.btg {
float: left;
padding: 0;
color: #000000;
background-image: url(images/btg.gif);
background-repeat: no-repeat;
height: 93px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
.bmg {
float: left;
margin: 0;
padding: 0;
width: 150px;
color: #000000;
background-image: url(images/bmg.png);
background-repeat: repeat-y;
}
.bbg {
float: left;
color: #000000;
padding: 0;
margin-bottom: 0;
margin-left: 0;
width: 150px;
background-image: url(images/bbg.png);
background-repeat: no-repeat;
height: 66px;
} |
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
|
<div class="btg">
<div class="bmg">
<div class="blocnouveau">
<THELIA_PROD type="PRODUIT" nouveaute="1" aleatoire="1" classement="inverse" num="1">
<div class="produitPetitnouveau">
<div class="titreProduitnouveau">
<h3><a href="#REWRITEURL">#TITRE</a></h3>
</div>
<a href="#REWRITEURL">
<THELIA_IMAGE type="IMAGE" num="1" produit="#ID" largeur="145">
<img src="#IMAGE" alt="#PRODTITRE " title="#PRODTITRE " border="0" class="contourImagenouveau" />
</THELIA_IMAGE>
</a>
<div class="chapoProduitnouveau">
#CHAPO
</div>
<div class="prixProduitnouveau">
• #PRIX €
</div>
<a href="panier.php?action=ajouter&ref=#REF" class="LIEN_commandernouveau">Ajouter au panier</a>
</div>
</THELIA_PROD>
</div>
</div>
</div>
<div class="bbg"></div> |
donc, la les images ne s'affiche meme pas ... en gros, il faudrait que :
Code:
1
2
3
4
|
<div class="titreProduitnouveau">
<h3><a href="#REWRITEURL">#TITRE</a></h3>
</div> |
S'affiche sur btg.png (et si le titre est trop long qu'il deborde automatiquement sur bmg.png ...
Je suis vraiment bloqué ... je vous en pris, mettez moi au moin sur la bonne voie !
Merci d'avance.
Cordialement,
Romain Fluttaz <r.fluttaz@gmail.com>
Site en dev : www.produitsdesavoie.com (sous thelia ==> www.thelia.fr)
