[Résolu] Etendre une image dans une colonne verticalement

Bonjour tout le monde,

Je suis en train de faire la refonte d'un site en css que j'avais fait en tableau. Et je suis confrontée à un probème de background.

Dans mes pages j'ai intégré une image à droite (un bandeau) que je veut faire répeter autant de fois que la hauteur de ma page. J'ai réussi à faire répeter mon image mais elle pousse tous les autres élèments de ma page, alors qu'elle est en background.

Voila ce qui se produit : http://www.27avril44.org/site-css-deportes/buchenwald.html
(édit par Igor: lien corrigé)

Mon css se trouve à cette adresse : http://www.27avril44.org/site-css-deportes/css/style2.css

Une partie de mon code css qui concerne la background de mon id=droite :

#global { /*permet de centrer le site sur ts les navigateurs*/
     margin-left: auto;
     margin-right: auto;
     width: 760px;
	 height: 100%;
     text-align: left; /* on rétablit l'alignement normal du texte */
	 border: 1px solid #000000;
	 background-color:#FFFFFF;	
	 background-image : url(../images/medaille2.jpg);
	 background-repeat: no-repeat;
	 background-position: right bottom; 
}
body { /* corps de la page*/
	margin: 0; /*pour éviter les marges*/
    text-align: center;  /*pour corriger le bug de centrage sous IE*/
	background-color:#F2F2F2;
	 height: 100%;
}
#droite {
 	background-image : url(../images/barre-degrade.jpg);
	 background-repeat: repeat-y;
	 background-position: right top;
	  height: 100%;
}

Merci beaucoup de votre aide.

Modifié par idays (26 Apr 2006 - 11:26)

Je vois pas le problème

En fait je voudrais que mon image en background contenue dans mon id=droite se répète de mon en-tete à mon pied de page.
Pour le moment mon image se répète mais elle fait descendre mon id-gauche et centre. Donc ça ne va pas.

J'espère avoir répondu à ta question

Bonjour,

Le code actuel:

#droite {
   background-image : url(../images/barre-degrade.jpg);
   background-repeat: repeat-y;
   background-position: right top;
   height: 100%;
   }

Ce n'est pas l'image en fond qui pousse le contenu, mais le bloc div#droite qui fait partie du flux du document. Par défaut sa hauteur est de 8px (celle de l'image). Si on fait se répéter le fond, sa hauteur grandit et il prend la place dont il a besoin, en repoussant le contenu placé plus bas dans le balisage.
Donc, il faut le sortir du flux du document.

Le code pour sortir le bloc du flux avec "position: absolute;" :

#droite {
   [#orange]position: absolute;
     right: 14px;
     top: 196px;[/#]
   width: 24px;
   background: url(../images/barre-degrade.jpg) repeat-y;
   height: 100%;
   }

(Le contenu n'a plus d'incidence sur le reste du document.)

Avec un "float: right" :

#droite {
   float: right;
   width: 24px;
   background: url(../images/barre-degrade.jpg) repeat-y;
   height: 100%;
   }

(Dans ce cas, le contenu repousse l'image d'illustration ; probablement à cause d'un padding-right sur celle-ci).


L'image est placée, sortie du flux du document... il reste le problème de la répétition verticale.
Par défaut, l'image fait 8px de hauteur. Le bloc div#droite n'ayant aucun contenu, c'est l'image qui lui confère sa hauteur.

PROBLÈME : l'image ne pourra pas s'adapter à la hauteur de la page et se répéter convenablement jusqu'en bas si on ne donne pas une hauteur adéquate au div#droite.

Comment passer outre ce problème ?

Il suffit d'intégrer cette image dans un fond qu'on va attribuer aux div#global qui contient la page. Voici l'image : http://univers-fusco.com/tests/fondglobal.png (png : largeur de 760px, hauteur de 8px, poids de 0.417 octets).

Voici ce que deviendrait le div#global :

#global { 
   margin: auto;
   width: 760px;
   text-align: left;
   background: url(http://univers-fusco.com/tests/fondglobal.png) repeat-y;
   }

Avec ceci, on a bien l'image à droite (les lignes bleues verticales) qui se répète verticalement jusqu'en bas. On peut mettre autant de contenu qu'on veut : ça s'adaptera.

En haut, ce sera caché par la bannière, en bas, par le pied-de-page. Avec cette méthode, on oublie le div#droite qui ne sert plus.

Les bordures droites et gauches d'"1px solid #000" du div#global sont intégrées dans l'image de fond. Il restera a mettre une bordure en haut sur la bannière et une bas sur le pied-de-page.


Edit --
Il reste ENCORE à créer un bloc div pour contenir l'image medaille2.jpg qui doit être placée en bas.
Ça donnerait quelque chose comme ça :

#medaille {
   position: absolute;
   right: 14px;
   bottom: 51px;
   background: url(../images/medaille2.jpg) no-repeat;
   }

(À placer n'importe ou dans le balisage, entre les balises <div id="global"></div>.)

Toutes les dimensions "top" et "right" données ici sont probablement approximatives. Elles ne servent qu'à donner une idée et il faudra peut-être les corriger d'un pixel ou deux.
Modifié par (25 Apr 2006 - 15:52)

Merci beaucoup neko pour ta technique de faire une grande image qui se répète ça marche nickel et en plus c'est propre.

Mais par contre maintenant je n'arrive plus à afficher mon image de médaille. Si j'intégre n'importe où dans mon code id=medaille, aucune image ne s'affiche, par contre si je remet l'image médaille en background dans mon id=globale elle s'affiche mais par contre mon image barre-degradé disparait. J'en conclue qu'on ne peut mettre qu'une image en background dans l'id=globale. Comment faire pour faire apparaitre ma médaille, j'ai essayé en position absolute, en float mais rien... .

Merci encore!