28172 sujets

CSS et mise en forme, CSS3

Background en bas de page

Pages :
Bonjour a tous,

Après 4h de recherche, de test et de désespoir, je cherche simplement à confirmer quelquechose.

Actuellement en phase de design,, j'essaie de placer une image (en arrière plan z-index:0, background-repeat:no-repeat) EN BAS A GAUCHE (image de 300*300)

Malheuresement si le contenu du site s'agrandi (apparition de la scrollbar), il m'est impossible de placer l'image en bas de page (et non en bas de fenetre)

En effet le bottom:0 correspond au bas de fenetre.

Existe t-il une solution pour placer mon background (sans calcul javascript de la hauteur de la fenetre)

Smiley sweatdrop

Merci d'avance


CraZy en pleur Smiley bawling Smiley cry
Modifié par CraZy (05 May 2008 - 11:41)
Bonsoir,

Apparemment (même surement Smiley cligne ), la méthode n'est pas la bonne (utilisation d'un positionnement absolue Smiley decu ).

L'idée serait plutôt de mettre ce fond sur l'élément body ou un élément assimilable (div global). Ainsi juste la règle css suivante :

background: transparent url('...') no-repeat scroll bottom left;


devrait faire l'affaire.

Bonne continuation.
Romain
Modifié par yodaswii (16 Apr 2008 - 23:09)
je comprend pas... ça c'est pas bon ? :
body{
margin: 0;
background: url(tonimage.jpg) no-repeat bottom left;
}
Que dire ?
Enorme braval, merci tout ce que tu veux.
Excellent ! j'ai galérer toute la soirée


MERCI Smiley biggrin
Modifié par CraZy (16 Apr 2008 - 23:16)
Enfait autre soucis !
Si le contenu devient très petit, le background remonte (meme avec un height:100% dans body)
Arf mais ca marche que sur IE maintenant ! jcomprend plus rien !!
Sous firefox ca fait comme un bottom:0;

HELP
Si ça marche que sur ie essais d'ajouter la propriété min-height: 100%; me semble qu'elle ne marche justement pas sur ie mais tout le reste... je ne m'en sert quasiment jamais mais ça devrait marcher.
cahnory a écrit :
Si ça marche que sur ie essais d'ajouter la propriété min-height: 100%; me semble qu'elle ne marche justement pas sur ie mais tout le reste... je ne m'en sert quasiment jamais mais ça devrait marcher.



enfait si jmet un height:100% sur html, body
mon background se place comme je souhaite, par contre sous FF, il va continuer de suivre la scrollbar (si scrollbar il y a)

alors que sur IE le backgroud reste positionné tout en bas de la page


que faire ?
cahnory a écrit :
pas un height mais un min-height.


nan mais si jmet un height 100% dans html (sur FF), ca se positionne mais ca suit la scrollbar ! et ce n'est pas ce que je souhaite!
essaie avec : background: transparent url('...') no-repeat fixed bottom left;

ou alors c'est que j'ai mal compris le sujet ^^
Tu as un sceenshot pour mieux se rendre compte ?
Modifié par warry (17 Apr 2008 - 19:20)
warry a écrit :
essaie avec : background-attachement: fixed;

ou alors c'est que j'ai mal compris le sujet ^^
Tu as un sceenshot pour mieux se rendre compte ?


c'est pas encore ca ! la ca reste bien placé (sur IE et FF) mais ca suit la scrollbar ! hors j'aimerais que ca reste tout en bas tout le temps
CraZy a écrit :


c'est pas encore ca ! la ca reste bien placé (sur IE et FF) mais ca suit la scrollbar ! hors j'aimerais que ca reste tout en bas tout le temps

Je viens de comprendre... long à la détente ^^

Tu as essayé ave une div englobante ?
html
<html>
    <head>...</head>
    <body>
        <div id="global">
            <div ... Ton code actuel ... /div>
            <!-- Au cas ou tu aies mis des "float" --->
            <br style="height:0;clear:both;" />
        </div>
    </body>
</html>

css

html, body {padding:0;margin:0;}
#glob {
    width:100%;
    background: url(..) botom left no-repeat;
}
...

html {height:100%;}
body
{
	font-family: Arial, Helvetica, sans-serif;	
	margin:0;	
	width:100%;
	height:100%;

}
#global {
min-height : 100%;
	background: white url('styles/bleu/bleu/explode.png') no-repeat scroll left bottom;
}


J'ai pas testé sous ie par contre (dans Firebug).
pas bon sous IE !
Je vais voir ce que je peux faire...

Si t'as encore un tour dans ton sac, je suis prenneur
Sachant que j'utilise les commentaires conditionnels, a prioris j'ai reglé le truk

#global ==> min-height pour FF

height pour IE


MERCI A TOI !! je vérifie tout après manger et je mettrais resolu si c'est OK

Merci encore
Modifié par CraZy (17 Apr 2008 - 20:10)
Pages :
Sujet clos
Aller à