image de fond boite div "principal"

[pidgts]

Bonjour, je me remets depuis peu à la mise en page de sites. J'avais l'habitude de travailler avec des tableaux, mais c'était au temps de Mathusalem. Aujourd'hui j'essaie les CSS.

Or, sur un bouquin, je lis:
"La boîte principale
Cette boîte principale, #pincipal, est faite pour contenir les trois boîtes gauche, centre et droite. C'est cette boîte qui va simuler les hauteurs de colonnes identiques par un remplissage d'une image colorée. Cette boîte contient une image d'arrière-plan de 1 pixel de haut et de 800 pixels de largeur (comme le conteneur). Cette image possède sur les 200 premiers pixels une couleur (pour la colonne de gauche), puis sur les 400 pixels suivant du blanc (pour la colonne du centre) et sur les derniers 200 pixels la même couleur qu'au début (pour la colonne de droite). Cette image va être répétée verticalement dans sa boîte pour simuler des colonnes colorées.
Ainsi la hauteur cette la boîte va toujours être égale à la hauteur de la boîte contenant le plus de texte et nous aurons bien l'impression d'avoir trois colonnes de hauteur égale, grâce à l'image qui va remplir la boîte #principal."

Je suppose qu'il faut définir une image de fond, mais je ne vois pas bien quelle syntaxe pourrait bien arriver àau résultat proposé. Le livre est étrangement muet sur ce sujet.
Un savant pourrait-il éclairer ma lanterne?

[padadam22]

Je trouve cette technique un peu barbare, sans pour autant être un expert du web... Pourquoi charger une image, même d'1px de haut, alors qu'on peut le faire avec des couleurs de fond et des bordures en css...

Sinon, le code css pour afficher l'image de fond :

Code: Tout sélectionner

background:url(images/tonimage.png);

Tu peux aussi ajouter,en fonction de tes besoins, un repeat Y pour que l'image ne se répète qu'en hauteur.

Code: Tout sélectionner

background:url(images/tonimage.png) repeat-y;

[Marie-Aude]

C'est pourtant la méthode classique pour faire apparaître trois colonnes de taille égales quelque soit la taille du contenu

[padadam22]

Certes oui, mais j'ai bien dit "je trouve", je n'y connais finalement pas grand chose

[franckM]

Cette technique présente aussi l'avantage d'un fond d'image beaucoup plus rapide à charger.

[Marie-Aude]

Eh bien le "pourquoi" est très simple : tu n'as pas moyen en css de fixer la taille en hauteur d'un élement (ou alors c'est une taille fixe), donc tu n'as aucun moyen de forcer des colonnes latérales à être aussi longue que la colonne centrale. En chargeant une image de fond qui "visualise" les colonnes dans le div qui contient les trois colonnes (et qui sera donc aussi haut que la plus haute) tu as visuellement la séparation en trois sur la totalité de la page, alors qu'en réalité les div les plus courts s'arrêtent plus haut.

[padadam22]

C'est vrai, juste remarque

[pidgts]

Voili, voilou,
la syntaxe proposée par Padadam22 ne marche pas.
je n'ai jamais trouvé nulle part ailleurs comment faire. Et comme j'ai horreur de rester sur une question non résolue, même par la négative, cela m'énerve. Certes, j'ai d'autre moyens pour faire ce que je veux, mais si cela est possible, j'attends le pro qui me dira comment.

[padadam22]

C'est pourtant le code classique, que j'utilise d'ailleur sur la plupart de mes sites.
As-tu bien spécifié l'url de l'image ?

[Marie-Aude]

La syntaxe est une url relative... donc si le dossier images est positionné différemment, elle ne marche pas.
Conseil, toujours utiliser des urls absolues par rapport à la racine du site /images/monimage.jpg par exemple

[padadam22]

Oui évidement, le lien n'était qu'un exemple... il faut remettre celui de son propre site.