Aller au contenu

Sujets conseillés

Posté (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é par Sotomayor01
Posté

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

Posté

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 ???

Posté

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

Posté

:boude::boude: 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 !)

Posté (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é par davidm
Posté

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 !!!

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...