Problème de background repeat
Bonjour,
Je développe actuellement un cadre à intégrer dans une page internet.
Pour faire simple, ce cadre possède en fond une belle image et par dessus je viens intégrer mon texte et une image.
Pour simplifier et dynamiser cela, j'ai découper cette image-cadre en 3:
- ThematiqueTop qui a en image de fond (background image) le haut du cadre, et contient une image et du texte (ThematiqueTitre, ThematiqueSSTitre)
- ThematiqueZ1Middle qui a en image de fond une partie du centre du cadre que je répète sur toute la hauteur de la div et qui contient une image et du texte.
- et enfin ThematiqueZ1Bottom qui étant vide, contient une image du bas du cadre.
Tout ceci fonctionne parfaitement, sauf dans le cas ou dans le ThematiqueZ1Middle, l'image est plus grande que le texte. Dans ce cas précis, l'image background du ThematiqueZ1Middle ne se repete pas.
Étrange, je ne comprend pas.
Voici mon code et en dessous le CSS associé. Il y a du style dans le html aussi pour des raisons pratique et de debugage.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<div id="thematiqueZ1">
<div id="ThematiqueTop" style="background-image:url('images/deco/contenu/Cont_Top_Grey.png');">
<div id="ThematiqueTitre">
<img src="images/deco/conten/Agenda.png" alt="Agenda"/>
</div>
<div id="ThematiqueSSTitre">Test de texte</div>
</div>
<div id="ThematiqueZ1Middle" style="background-image:url('images/deco/contenu/Cont_Middle_Grey.png');">
<div id="ThematiqueImg" style="float:left;">
<img src="images/deco/vignette/accueil_sortir.png" alt="vignSortir"/>
</div>
<div id="ThematiqueTexte">Lorem ipsum dolor sit amet,.
</div>
</div>
<div id="ThematiqueZ1Bottom" style="background-color:blue;">
<img src="images/deco/contenu/Cont_Bottom_Grey.png" alt="imgBottom"/>
</div>
</div> |
Code CSS:
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
|
#thematiqueZ1{
position:relative;
top:0px;
left:30px;
width: 712px;
margin-bottom:20px;
}
#ThematiqueZ1Top{
height: 50px;
background-repeat:no-repeat;
}
#ThematiqueTitre{
float:left;
position:relative;
left:-20px;
top:2px;
}
#ThematiqueSSTitre{
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:medium;
color:white;
margin-top:8px;
}
#ThematiqueZ1Middle{/*Le Middle contient une image et le texte*/
background-repeat:repeat-y;
}
#ThematiqueImg{
margin:2px;
margin-left:10px;
margin-right:5px;
}
#ThematiqueTexte{
font-family:Arial, Helvetica, sans-serif;
font-size:small;
text-align:justify;
margin-left:20px;
margin-right:20px;
} |
