Discussion :

[cortex024]

Bonjour,

j'aimerais, comme indiqué dans le titre, pouvoir mettre 3 images en background.
J'ai en fait une barre de titre, qui a une image en background.

Il suffit donc de créer une image très étroite, et de la répéter en background afin qu'elle s'adapte à la largeur.

Mais celle-ci comportant des coins à gauche et à droite, cela pose donc problème si cette barre de titre est de dimension variable: en effet, il faudrait alors créer plusieurs images pour background en tailles désirées.

Je me demandais alors si il n'y avait pas moyen de définir une image de gauche, une image de droite et l'image au centre qui se répète.

un truc du style:

Code :

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

1
2
3
4
5
6
 
background-image-left:url(images/image_de_gauche.png);
background-left-repeat:no-repeat;
background-image-center:url(images/image_du_centre.png);
background-image-right:url(images/image_de_droite.png);
background-right-repeat:no-repeat;

j'ai vu qu'il y avait moyen de faire de la superposition d'image, peut-être en se basant la dessus mais je ne vois pas trop comment?

merci de vos réponses

[mama07]

La solution que tu as, c'est de créer trois div avec l'attribut float.
tu mets:

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
 
div#left{
high:auto;
background-image-left:url(images/image_de_gauche.png);
background-left-repeat:no-repeat;
float:left;
}
div#center{
high:auto;
background-image-center:url(images/image_du_centre.png);
float:left;
}
div#right{
high:auto;
background-image-right:url(images/image_de_droite.png);
background-right-repeat:no-repeat;
float:left;
}

[Clorish]

ou plus simple :

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
 
div#left, div#center, div#right {
width : 100%;
height : 100%
}
 
div#left{
background : url(images/image_de_gauche.png) top left no-repeat;
}
 
div#center{
background : url(images/image_de_gauche.png) top repeat-x;
}
div#right{
background : url(images/image_de_gauche.png) top right no-repeat;
}

avec une imbication des divs :

Code :

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

1
2
3
4
5
6
7
8
9
 
<div id="header">
  <div id="center">
    <div id="left">
      <div id="right">
      </div>
    </div>
  </div>
</div>

center doit etre en premier car les coins viendrons ecraser les bords.
apres on peut moduler ....

[cortex024]

j'ai essayé la 2ème solution proposée.

ca fonctionne, c'est parfait merci