28172 sujets

CSS et mise en forme, CSS3

bonjour

je veux utiliser une arriére plan dans mon site en body

mais je veux ques cette image serai repeter verticalement

et étirer horizontalement

qui faire donc

je souhaite que vous me comprendre

et merci d'avance, Smiley lol
Modifié par sosdes (09 Jul 2009 - 21:48)
Administrateur
Bonjour,

actuellement ce n'est pas possible avec un arrière-plan CSS de l'étirer.
- ça existe en CSS3 mais ce n'est ni cette année ni l'année prochaine que les navigateurs le comprendront: background-size donc mieux vaut oublier
- en javascript, il y a peut-être une astuce (?) mais qu'est-ce que ça donnera pour ceux qui désactivent javascript?
- une image HTML que l'on fait occuper toute la page et que l'on place derrière le contenu (pas terrible)

Mais souvent une astuce graphique suffit, c'est assez courant. C'est à base d'une ou deux images de 3px de haut et 2000px de large.
À quoi ressemble ton image?? Est-ce que le bord gauche ou bien le bord droit est une couleur unie? Ou bien as-tu un motif à gauche, un motif à droite et toute la partie centrale est de couleur unie? Tant qu'il y a une couleur unie à répéter à gauche, au centre ou à droite, c'est possible Smiley smile
Felipe a écrit :
Bonjour,

actuellement ce n'est pas possible avec un arrière-plan CSS de l'étirer.
- ça existe en CSS3 mais ce n'est ni cette année ni l'année prochaine que les navigateurs le comprendront: background-size donc mieux vaut oublier
- en javascript, il y a peut-être une astuce (?) mais qu'est-ce que ça donnera pour ceux qui désactivent javascript?
- une image HTML que l'on fait occuper toute la page et que l'on place derrière le contenu (pas terrible)

Mais souvent une astuce graphique suffit, c'est assez courant. C'est à base d'une ou deux images de 3px de haut et 2000px de large.
À quoi ressemble ton image?? Est-ce que le bord gauche ou bien le bord droit est une couleur unie? Ou bien as-tu un motif à gauche, un motif à droite et toute la partie centrale est de couleur unie? Tant qu'il y a une couleur unie à répéter à gauche, au centre ou à droite, c'est possible Smiley smile



salut Felipe

pour mon image il n'y a pas de problem dans la largeur n'importe quelle largeur peut etre repeter son problem verticalement voila un exemple
http://forum.alsacreations.com/upload/22608-etirer.png
mais le problem c'est ds la hauteur si l'image se repete sa ne va pas donc je pense que la seul solution c'est de faire affecter la couleur de bas de l'image a background-color ,

Felipe a écrit :
- une image HTML que l'on fait occuper toute la page et que l'on place derrière le contenu (pas terrible)


pour cette point comment faire???

et merci beaucoup pour ta reponse Smiley smile upload/22608-etirer.png
Modifié par sosdes (10 Jul 2009 - 00:49)
sosdes a écrit :
mais le problem c'est ds la hauteur si l'image se repete sa ne va pas donc je pense que la seul solution c'est de faire affecter la couleur de bas de l'image a background-color

Oui, c'est une bonne piste.

sosdes a écrit :
pour cette point comment faire???

Exactement comme tu viens de le dire:
background-image: url(body-bg.png);
background-repeat: repeat-x;
background-color: #808080;

Tu peux aussi regarder du côté de background-atachment, ça peut donner un effet intéressant.

En passant: l'image est trop lourde pour ce que c'est. Ça devrait peser moins d'1 Ko, une image comme ça. Le problème vient du fait que le dégradé n'est pas régulier. C'est volontaire, ou c'est une mauvaise utilisation de l'outil de dégradé dans le logiciel de graphisme utilisé? (Dans Photoshop par exemple, pour un dégradé régulier qui se compresse bien en PNG ou GIF il faut éviter d'utiliser le tramage.)
Modifié par Florent V. (10 Jul 2009 - 14:31)
merci bien Florent V,
mais pour background-atachement ca vraiment donne un effet trés bon avec fixed mais si la hauteur du contenu depasse la hauteur de l'image du background puisque on a une page dynamique il aura un problem,
est ce que tu as une autre idée pour l'éviter???