28172 sujets

CSS et mise en forme, CSS3

Arrière plan coller en bas de page

Bonjour tout le monde,

je suis face a un soucis sur mon css et après moulte recherche, je n'ai rien trouvé de convenable. Je me permets donc de venir demander votre aide.
Je vous explique le soucis,
J'ai un site contenant un template graphique. Dans ce dernier j'ai du intégrer un arrière plan qui doit se caller en bas de la page du navigateur en décallé de 100px du site lui même. L'image de fond doit donc suivre le bas de page, si la page est longue et contient un scroll, le bas de page ne sera donc pas obligatoirement visible en arrivant sur la page. J'ai réussi à faire ceci sans trop de problème, par contre il y a un "gros" problème lorsque le navigateur est de hauteur minime, en effet, l'image passe en dessous de la barre de navigation au lieu d'être bloquée en haut de l'écran, l'image se bloque tout de même à un moment, j'ai l'impression qu'elle se bloque quand elle arrive tout en haut du navigateur sous la barre de navigation.
Sauriez vous d'ou vient le problème ? Comment faire pour que l'image se bloque en haut de la page lors de son ascension et non en haut du navigateur ?

Je vous donne un bout de mon code :

Code css
html, body{
	height:100%;
	margin:0px;
	padding:0px;
	}

#global{
	position:relative;
	width:1000px;
	height:auto !important;
	height:100%;
	max-height:auto;
	min-height:100%;
	margin-left:auto;
	margin-right:auto;
	background-image:url(../images/page%20visiteur/home_visiteur_imgfond.jpg);
	background-repeat:no-repeat;
	background-position:left bottom;
}

#site{
	padding-top:20px;
	position:relative;
	width:800px;
	margin-left:auto;
	margin-right:auto;
}


Code html

<body>
	<div id="global">
		<div id="site">
                </div>
        </div>
</body>


Merci par avance pour vos réponses.

++
c'est que c'est pas une demande simple Smiley smile

moi je trouve cela normale comme comportement, tel que c'est écrit

par contre pour faire ce que tu demande, test en modifiant :


#global{
	position:relative;
	width:1000px;
	/* height:auto !important;  - supprimer ça */
	height:100%;
	max-height:auto;
	min-height:500px; /* modifier ça : hauteur de ton fond */
	margin-left:auto;
	margin-right:auto;
	background-image:url(../images/page%20visiteur/home_visiteur_imgfond.jpg);
	background-repeat:no-repeat;
	background-position:left bottom;
}


ça m'a l'ai bon ... évidement ta page aura pour hauteur minimale celle du fond en question, sinon il te faut trouver une autre astuce en changeant ton design probablement

j'ai pas testé compatibilité IE, hin
Modifié par titeuf (08 Jul 2009 - 18:13)
Sujet clos
Aller à