Etirement des images d'arrière plan comme dans un tableau

Bonjour,

Dans le cadre d'un travail, je suis confronté à un design qui comporte des images d'arrière plan.

Celles-ci comportent un effet qui doit être visible entièrement et peu importe la largeur du contenant.

Il s'agit concrètement de boutons, de menus, de l'entête...

L'image utilisée est une sorte de carré avec un dégradé au centre.

Pour avoir toujours cet effet, ceux qui ont fait le code HTML ont utilisé des tableaux car chacun sait que les images suivent les dimensions des cellules en hauteur comme en largeur.

Cependant, je trouve ca pas propre du tout, mais je n'ai pas d'alternative à proposer en XHTML/CSS.

Y a-t-il un moyen de produire l'effet escompté sans utiliser de tableaux ?

D'avance merci !

Salut,

Un peu de lecture dans les nombreuses ressources du site que tu devrais parcourir :
Construire un site sans tableaux

Salut,

Je connais ces pages, je les ai déjà lues et appliquées. Je me tue à lutter contre ces satanés designs en tableaux et ma question est justement liée à cela : est-il possible d'étirer une image d'arrière plan ?

Le design n'est pas de moi et l'implémentation non plus, mais c'est un portail qui a été créé où je bosse et j'aimerais qu'on puisse virer petit à petit les mises en forme en tableaux. Et pour cela on doit garder absolument le même aspect.

Mais si je ne suis pas sur de pouvoir produire la même chose sans les tableaux, on m'enverra paitre

Salut,

Etirer non, répéter oui. Et de toute manière la répétition évite la déformation de l'image.
Il te faut te pencher sur les différentes propriétés de background, notamment background-repeat.

Concernant l'aspect, en web l'absolu en matière d'aspect n'existe pas, car chaque navigateurs, aussi standard soit il, donne une interprétation du code qui n'est jamais parfaitement identique.
Donc il faut savoir s'adapter. Mais à priori, il n'y a rien qui soit faisable en tableau qui ne l'est pas en CSS, outil autrement plus riche !

Avec la réserve émise par Mikachu, Raphael avait commis ce petit chose il y a déjà un petit moment : Comment faire un arrière plan étirable ?

CSS3 semble annoncer également de bonnes choses à ce sujet comme nous l'explique Simon-K : ici.

Bonnes lectures,
Cdt,
Sylvain

Heriquet a écrit :
Pour avoir toujours cet effet, ceux qui ont fait le code HTML ont utilisé des tableaux car chacun sait que les images suivent les dimensions des cellules en hauteur comme en largeur.

Ah bon? À ma connaissance, c'est faux. Bien sûr si on place un <img width="100%" height="100%" alt="" src="..."> comme seul contenu de la cellule de tableau, ça devrait marcher comme ça (pour la hauteur, au moins en mode Quirks). Mais ce n'est pas particulièrement une propriété des tableaux.

Salut,

Il y a un article assez complet ici sur le sujet => How To: Resizeable Background Image.
Je sais qu'il est aussi possible de le faire avec jQuery et quelques lignes de code, mais j'ai perdu le lien