Sotomayor01 Posté 22 Avril 2005 Posté 22 Avril 2005 (modifié) Bonjour, ou plutot bonsoir, à toutes et à tous, Mon premier "vrai" message sur ce forum à pour but de trouver un moyen de creer un site possédant un background extensible en largeur, selon la taille de la fenetre, et en hauteur, en fonction du volume de texte et/ou de la hauteur de la fenetre. J'ai donc commencé par creer deux calques en css : #fond {height:100%;width:100%;top:0;left:0;}#fond img {height:100%;width:100%;}#site {height:100%;width:99%;top:0;left:0;position:absolute;} Et mon site à pour structure : ...<body><div id="fond"><img src="design/kuantum.jpg"></div><div id="site">..<div class="header">...</div>..<div class="centre">...</div>..<div class="pied">...</div></div> Et voici le résultat quand le texte est plus important que la hauteur de l'image : ICI : le texte blanc dépasse du background et devient donc illisible. Si le texte est moins important que la hauteur d'image, voici ce qui se passe : ICI : l'ascenceur vertical apparait, car l'image est rop grande, alors que ca n'est pas indisprensable... J'espère que votre aide m'aidera à resoudre ce problème qui m'empeche de terminer le site du club d'athlétisme auquel j'appartiens... Merci d'avance Modifié 22 Avril 2005 par Sotomayor01
Dan Posté 22 Avril 2005 Posté 22 Avril 2005 Bonjour, Il faut éviter une <div id="fond"><img src="design/kuantum.jpg"></div> car ce n'est pas du tout extensible et l'image ne sera pas répétée. Au lieu de cela, il faut utiliser la propriété css background-image:url(design/kuantum.jpg) pour la balise body ou pour une div conteneur qui englobe la page. Il faut dans ce cas s'assurer que l'image soit une image qui puisse se répéter dans les deux directions sans rupture visuelle. C'est donc une image de type "pattern" qu'il faut. Dan
Sotomayor01 Posté 23 Avril 2005 Auteur Posté 23 Avril 2005 Merci pour ta réponse DAN, j'ai modifié mon css, et viré la ligne dans le html... Par contre je ne sais pas ce que veut dire "image pattern", je suppose que cela veut dire "mosaique", mais le problème, c'est que je possède une image que je veux garder, ET ne pas dupliquer, ni horizontallement, ni verticallement, voila pourquoi je cherche une autre piste, mais.. EXISTE-T-ELLE ???
Dan Posté 23 Avril 2005 Posté 23 Avril 2005 Bonjour, Une "pattern" est une image qui peut être mise en mozaïque sans qu'on ne remarque de séparation entre les cases. Ce que j'appellais "sans rupture visuelle". Il ne sera pas à ma connaissance possible d'étirer ton image. Mais tu peux la centrer sur ta page avec les attributs CSS suivants: background-position:center center; backbround-repeat:no-repeat; Dan
Sotomayor01 Posté 23 Avril 2005 Auteur Posté 23 Avril 2005 J'avais malheureusement peur de cette réponse !! Bon je vais essayer de centrer l'image, et de mettre un fond s'aprochant de sa couleur pour masquer les parties blanches, mais je doute fort du résultat... Merci beaucoup de ton aide DAN, très sympa le forum (au travers de ce topic et tous ceux que j'ai pu lire !)
davidm Posté 1 Mai 2005 Posté 1 Mai 2005 (modifié) En attendant CSS3 et la propriété background-size, difficile de trouver une solution. J'ai fouillé sur les forums anglo-saxons les plus poussés sur ces questions, sans réel résultats. Juste ce javascript que je n'ai pas testé... à voir, je suis un peu dubitatif, mais enfin voilà l'adresse : http://www.morpheusweb.it/html_eng/scripts...ini/sfondo2.zip Modifié 1 Mai 2005 par davidm
Sotomayor01 Posté 1 Mai 2005 Auteur Posté 1 Mai 2005 Merci de ta réponse DAVIDM, est ce que tu sais pour quand est prévu la sortie du CSS3 ? Sinon je pense bien avoir recours a un javascript, avec choix de l'image de fond en fonction de la résolution de l'utilisateur... Merci encore pour l'aide, et vivement les prochaines améliorations de CSS3 !!!
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant