Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

[CSS] background-image et firefox

2 réponses
Avatar
Anthony THIBAULT
Bonjour, voilà j'ai un petit soucis qui m'embète la vie depuis ce midi...
http://www.graphismedia.com/test/

Si vous regardez cette page avec IE6, vous voyez très clairement l'image du
bas avoir le comportement exacte que je recherche, à savoir : sous le texte,
et collée en bas du div.

Maintenant la même page avec firefox ou mozilla et paf, mon image en
background-image vient se coller sous le texte lorsqu'on réduit la fenetre.
J'ai beau faire tout ce que je peux (margin au <p>, padding-bottom au
conteneur global ) rien n'y fait... J'ai bien compris que l'image se colle
automatiquement au bas du div qui est en 100% quelque soit la hauteur de la
fenetre et que ce comportement est finalement logique par rapport à ce que
je lui demande..

Mais ma question est la suivante :

Comment faire pour que ça fonctionne comme ce que je vois dans IE (chose que
je n'arrive pas à reproduire en standard, alors qu'avec un tableau
évidament, c'est fait en 30 secondes.. mais bon c'est pas bien :o) )

Merci d'avance

Anthony

2 réponses

Avatar
David
Le Wed, 3 Mar 2004 16:56:36 +0100, "Anthony THIBAULT"
écrit:

Merci mais ça ne donne évidament pas du tout ce que j'attend...
Regarde bien avec IE6 ce que donne le comportement de l'image du bas lorsque
tu redimensionne ta fenetre, c'est EXACTEMENT ce que je veux obtenir sur les
autres navigateurs...
et avec ton idée : ben c'est un div tout con qui ne se redimensionne pas..
Merci quand même :)



OK, j'étais en 800x600 et ça ne marche pas pour des résolutions
supérieures...
La seule solution que j'ai trouvé c'est d'agrandir le GIF en hauteur,
c'est à dire d'ajouter de la couleur du même fond que le div#global,
puis de le mettre en fond de page. Disons qu'avec une image de
500x1450, ça convient pour la plupart des résolutions, donc au moins
jusqu'en 1920x1440. J'ai fait un essai et le poids du GIF fait 3,1 Ko,
au lieu de 1,5 Ko.
C'est pas l'idéal mais je crois bien que c'est soit ça, soit retour
aux tableaux :(

body {
background:url('test.gif') no-repeat bottom;
}

body,p {
margin:0;
padding:0;
}

#global {
color:#c7c7b9;
width:500px;
margin-left: auto;
margin-right: auto;
}

.space {
margin-bottom: 85px
}


David
Avatar
emmanuel(point]clement(at]free(point]fr
David wrote:

C'est pas l'idéal mais je crois bien que c'est soit ça, soit retour
aux tableaux :(



Absolument pas de retour aux tableaux.

Tout les éléments de réponse sont dans cette discussion.
Il faut simplement creuser la technique décrite sur ALISTAPART et faire
les bons croisements avec ce qu'il s'est dit ici.

ça s'appelle "le travail"... on ne va tout de même pas fournir les
solutions toutes cuites non ;-)

Moi j'y arrive, pas vous ?

--
Emmanuel CLÉMENT - web design
---------------------------------
http://emmanuel.clement.free.fr/
http://www.openweb.eu.org/
---------------------------------