Double min-height et image de fond a 100%...

Bonjour à tous,
Je vous dérange un petit peu, si vous avez un peu de temps à me consacrer
Mon idée, mon but , ma mission :

• Un bloc centré qui va jusqu'en bas de la page quelque soit la longueur du texte dedans.
• Une fleur en premier plan de ce bloc toujours en bas de page
• Une image en fond de page étirable à 100% en width et toujours en bas de page également

Je sais faire tout cela séparément mais pas moyen quand tout est en même temps !

ex : Une image à la racine du body qui en css est étirée, absoluté relativement au body...
http://www.maracas.fr/test_alsa/index03.html

img#fond_ciel_herbe{ background:#252525; width:100%; position:absolute; bottom:0;

html, body 
{ min-height: 100%; height: 100% }

div#global 
{  position:relative; width:581px; margin:0 auto; background:#FFFFFF 250px; min-height: 100%; }

Vu que j'ai un bloc #global en min-height:100% je ne peux pas en mettre au body du coup le body s'arrête aux frontières de la fenêtre navigateur et l'image ne descend pas jusqu'en bas...

J'ai essayé plein de combinaison et j'avoue je n'ai plus d'idée ! si quelqu'un à une petite idée, une petite astuce, un petit peu de temps... Merci d'avance

Je précise que mes tests ont été effectué avec Firefox 3

Gaetan

Bonjour,
Je retente de lancer ma question parce que j'ai fait un test en plus :
Si je comprends bien un seul élément peut avoir un min-height: 100% (dans le flux de la page j'entends)..

Du coup j'ai inclus mon image, que j'aimerai avoir en fond, dans mon div #global

<div id="global">
<img src='images/fond_herbe_butte_01.png' id='fond_ciel_herbe' />
<div id="header"></div>
<div id="contenu">

mais évidemment il passe par dessus mon bloc, son fond et le texte...

Il doit y avoir une solution mais je ne sais pas du tout comment faire... Parce que j'ai pas envie de jouer avec les z-index parce que #global doit rester dans le flux...

Si quelqu'un a déjà eu le problème... parce que j'avoue que j'ai plus d'idée.

Merci

Moveo a écrit :
Si je comprends bien un seul élément peut avoir un min-height: 100% (dans le flux de la page j'entends)..

Pour être plus précis: de même qu'un height en pourcentages, un min-height exprimé en pourcentages ne pourra être appliqué que si le parent de l'élément a une hauteur définie explicitement en CSS (avec la propriété height), ou bien une hauteur calculée en CSS via le positionnement absolu ou fixe et les propriétés top et bottom utilisées conjointement.

Donc si le parent a une hauteur définie avec:
- height: 400px, ça marche;
- height: 50%, ça marche uniquement si le parent du parent a lui-même une auteur définie explicitement, etc.;
- height: auto; position: absolute; top: 0; bottom: 100px, ça devrait marcher aussi;
- height: auto; position: static, ça marche pas;
- height: auto; min-height: 500px, ça marche pas;
- height: auto; min-height: 100%, ça marche pas non plus.

Il ne s'agit pas de savoir si on a utilise un ou deux ou cent min-height.

Remarques générales:
- les images étirées par le navigateur, ça a un rendu pas terrible (c'est le cas ici);
- une image de fond non étirée, mais en background-position: center bottom et suffisamment grande et versatile, ça peut être bien;
- tes deux images sont excessivement lourdes, dommage de plomber la réactivité du site ainsi.

Merci beaucoup Florent V. pour toutes ces précisions.
Par contre il y a un truc que je saisi pas trop.

Dans mon exemple :
J'ai un arborescence type body->#global et body->#fond_ciel_herbe

mon body a bien une hauteur définie explicitement et son parent html aussi

html, body 
{ height: 100%; }

mon div #global occupe bien toute la hauteur

div#global 
{  
 position:relative; 
 background: #FFFFFF 250px;
 width: 581px; 
 margin: 0 auto;
 min-height: 100%; 
}

par contre mon div #fond_ciel_herbe qui a le même parent (body) ne remplie pas toute la hauteur et est collé en bas du navigateur

#fond_ciel_herbe
{ 
 position:absolute; 
 background: #454514; 
 width: 100%;
 margin: 0; 
 min-height: 100%; 
}

Ils ont tous les 2 le même parent (qui a un height:100%) mais ne réagissent pas pareil au min-height c'est ça que je comprends pas très bien en fait....

http://www.maracas.fr/test_alsa/index02.html

Merci beaucoup.
Modifié par Moveo (17 Nov 2009 - 10:26)

Re-,
Quelqu'un aurait une petite idée quant à mon problème de double min-height avec le même div parent (voir mon dernier post) ?

Je juste savoir si c'est possible. Sinon tant pis je me lance dans un autre design




Merci à vous
Modifié par Moveo (23 Nov 2009 - 16:12)