CSS: image s'ajustant a la hauteur de l'écran

**Sylvain245** · 10/02/2006, 10h27

Bonjour,

J'ai un petit soucis, le graphisme du site que je developpe a fait un tas de découpe pour ensuite tout convertir en html, résultat toute la mise en forme est fait avec plein de tableau etc...

Je voudrais tout faire la mise en forme avec du CSS, hors je rencontres quelques problèmes.

url de l'exemple en question.
http://www.mhs01.com/_psn3/index.html

Comment faire, en css pour que les lignes présente de chaque coter de la tétiére (l'image du haut) puisse s'ajuster en hauteur selon le contenu de la page ?

merci

**gwendal84** · 10/02/2006, 12h27

euh je suis pas sur d'avoir tout compris, mais peut etre qu'en utilisant un div et une url de fond non répétée sur cette div, celà résoudrais ton problème :

Code :

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

1
2
3
div.main{
	background: url("...") no-repeat;
}

**Sylvain245** · 10/02/2006, 15h36

oui, en fait, cest un peu plus compliquer...

je vais faire un exemple

avec un tableu, il est possible de faire quelques chose du genre :
http://<br /> http://iteckwebx.info...est.html<br />

le code de cette exemple est le suivant :

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
 
<body bgcolor="Olive" background="back.jpg">
<table cellpadding="0" cellspacing="0" align="center">
	<tr>
		<td background="psnindex_r1_c3.jpg" width="8"></td>
		<td><img src="000.jpg"><br>
		test<br>
		test<br>
 
		test<br>
		test<br>
		</td>
		<td background="psnindex_r1_c8.jpg" width="7"></td>
	</tr>
</table>

je cherches a faire quelques choses d'identique mais qu'avec du CSS sans utiliser la balise <table> qui est normalement utiliser pour l'affichage de donner et nom la mise en page.

hors, comment faire, pour que les images en background dans les 2 cellules, ce repete en tenant compte de la longeur de la page (la longueur du texte va varier bcp, donc les lignes changer de hauteur, selon les besoins.

avez vous une idee ?
merci

**gwendal84** · 10/02/2006, 15h51

euh je pense avoir saisit le problème là

tu parles des images avec des dégradés derrière ton contenu (petits arbres, etc...)

le mieux, je pense est de les aligner en bas à droite et de mettre une couleur de fond qui prolonge l'image :

Code :

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

1
2
3
4
5
 
div {
	background: white url("...") no-repeat; 
	background-position: bottom right;
}

ça réponds à ton problème ?

**_dranece_** · 10/02/2006, 16h03

Essayes ça (j'ai repris ton exemple):

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
 
body{
   background-color: Olive;
   background-image: url(black.jpg);
}
#header {
   background: url(psnindex_r1_c3.jpg) repeat-y left top;
}
#header_decoration{
   background: url(psnindex_r1_c8.jpg) repeat-y right top;
   padding-left: 20px;/* remplacer 20 par la largeur de  psnindex_r1_c3.jpg*/
   padding-right: 20px;/* remplacer 20 par la largeur de  psnindex_r1_c8.jpg*/
}
<body>
 <div id="header">
  <div id="header_decoration">
      <img src="000.jpg"><br/>
      test<br/>
      test<br/>
      test<br/>
      test<br/>
  </div>
 </div>
</body>

ps: le header_decoration sert à mettre une 2 eme image en background.

**Sylvain245** · 10/02/2006, 16h35

probablement que le degrader blanc vers gris vas disparaitre, car il est en oblique, mais oui, le probleme viens surtout des images qui font 1 pixel de long ou large, qu'il faut que je repetes pour les ajuster selong la hauteur de la page.

chaque ligne formant les bordures (les lignes beiges) est en fait une image de 1 pixel par x qui doit etre repeter pour former une ligne.

Je vais essayer encore pendant quelques heures, sinon je crois que ca va rester avec le bon vieu tableau.

**Sylvain245** · 10/02/2006, 16h53

_dranece_ -->

c'est presque ca en effet.
mais quand on essaye de centrer le tout, la ligne de gauche reste a gauche.

Je vais aller manger, et continuez a bosser apres la dessus.

moi j'essayais de placer les trucs avec positon:relative et absolute..

CSS: image s'ajustant a la hauteur de l'écran

Dimensionnement en CSS

Discussions similaires

Partager

Partager