Aller au contenu

Un background étirable ?


Sotomayor01

Sujets conseillés

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
Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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
Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

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



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