Répétition verticale des images de bordures redimensionnables en utilisant css

Question

Je crée une page web pour un ami et à la minute j'ai la disposition suivante: il y a une bordure de 10%, une zone centrale de 80% pour la bannière et le contenu, et 10 autres % frontière sur la droite. Maintenant, au lieu d'avoir les zones gauche et droite vides, j'aimerais que l'image se répète aussi bas que la page (ce qui sera probablement différent pour chaque page). Je voudrais redimensionner l'image lorsque la fenêtre est redimensionnée (donc la taille img sera de 100% dans la zone de 10%).

J'ai ajouté un div et défini les propriétés float: left et défini la taille et c'est super mais je n'arrive pas à répéter l'image. J'ai également essayé de régler l'image comme une image de fond et cela l'a fait répéter mais alors elle reste à sa taille d'origine. Existe-t-il un moyen de répéter et de redimensionner l'image?

Merci, Neil

Answer 1

Vous pouvez répéter une image de fond css, mais vous ne pouvez pas redimensionner, pour autant que je sache.

Apparemment, CSS3 vous donne un moyen de spécifier la taille des images d'arrière-plan. Vous pouvez spécifier cette taille en pixels, en largeur et en hauteur, ou en pourcentages. Lorsque vous spécifiez une taille en pourcentage, la taille est relative à la largeur ou à la hauteur de la zone que vous avez indiquée en utilisant background-origin. Mais, les seuls navigateurs ayant cette fonctionnalité implémentée jusqu'ici sont Opera 9.5, Safari 3, Konqueror et les derniers nightlies firefox, ils utilisent -o-background-size, -webkit-background-taille, -khtml-background-size et -moz -background-taille.

Par exemple,

#myDiv{background-size: 200px 50px} 

Comme vous devez savoir, ce ne sont pas le navigateur le plus utilisé (IE, Chrome, FF sont) donc vous ne devriez pas utiliser pour l'instant.

Answer 2

Essayez:

.myClass 
{ 
    background-repeat: repeat-y; 
} 

Ajoutez que les règles de votre div, ce répétera comme un arrière-plan, mais pour le redimensionner, soit vous pouvez utiliser CSS3 (qui ne sont pas encore très bien pris en charge) :

.myClass 
{ 
    background-size: 100px 500px 
} 

ou utilisez votre logiciel de retouche d'image préférée à l'échelle vers le bas :)

Answer 3

Je crains que non. La répétition n'est possible qu'avec des images d'arrière-plan, mais elles ne permettent pas de spécifier une taille. Avec CSS3, vous pouvez utiliser background-size mais ce n'est pas encore supporté par de nombreux navigateurs.

La plupart des concepteurs résolvent le problème en faisant en sorte que les côtés intérieurs des images se fondent avec la couleur d'arrière-plan.