Un CSS avec deux images qui se complètent

Bonjour à tous !

Deux images de fond peuvent-elles se compléter afin de créer une seule et même image en CSS ?

Je m'explique.
J'ai, sur chaque page de mon site, une image de fond retravaillée avec un logiciel de retouche d'image. Cette image est donc insérée dans chaque page (x)HTML.
Sur chacune des pages du site, je vais créer une forme commune à toutes les pages : elle viendra s'apposer sur l'image de fond de chaque page. J'ai donc créé un "calque" de la taille de l'image, qui correspond à la résolution pour laquelle je travaille.

Ce calque, une fois en bas, va évidemment laisser la place à du blanc (couleur par défaut).
L'effet que je veux réaliser doit permettre une continuité entre ce calque et la suite, et ce, jusqu'au bas (ou non, d'ailleurs). J'avais donc idée de mettre bout-à-bout une bande de 10 px de hauteur que j'aurais, à l'aide d'un

repeat-y

laissé se répéter à l'envi automatiquement par un

height:auto

J'ai lu, il y a longtemps, un tutoriel Alsacreations dans lequel étaient repris ces éléments : ils m'auraient évité de poser la question... Je viens de mettre plus d'une heure à le chercher et à trouver la question déjà posée... sans succès.

Merci de vos réponses.
Modifié par ptipilou (05 May 2010 - 18:26)

Bonjour,

Euh... Je n'ai absolument rien compris à ce que tu cherches à faire.

Aurais-tu un schéma décrivant ton problème ?

Hello,

As tu déjà coder une partie de ton problème ou as-tu une image de ton template pour que l'on puisse mieux cerné ton problème.

Charly

Bonjour !

J'ai peut-être été peu clair dans mes tentatives d'explication.
En gros, cela reviendrait à diviser en trois une image... mais ce n'est pas une image.
Une partie haute (une élipse - une image -, d'une taille définie, par exemple 1024*768), une partie centrale puis une partie basse.

Compte-tenu du texte, l'élipse va "s'arrêter" une fois que le texte aura dépassé la hauteur de l'image, et mettra par défaut la couleur (choisie ou non) de fond.
Or, ce que je souhaite, c'est pouvoir poursuivre cette élipse avec une bande de 10 px continuant l'élipse, à volonté selon la taille du corps et enfin, une base de la couleur définie de l'élipse.

J'ai bien conscience que c'est un peu difficile à comprendre, c'est pourquoi je vous montre ci-dessous le schéma de ce que je souhaite pouvoir réaliser.
C'est le mieux que je puisse faire, soyez indulgents !



Je pourrais parfaitement avoir le même résultat en xHTML (en l'insérant sur chaque page) à l'aide du CSS (en lui donnant le positionnement que je veux), mais comme il s'agira d'une structure commune à toutes les pages, j'ai pensé qu'elle serait mieux en CSS...

Merci de toutes vos réponses.
Bonne journée.

Salut,

Ce que tu cherche à faire est tout à fait possible en utilisant ces deux images sur deux conteneurs imbriqués. Sur le conteneur externe tu appliqueras en fond ton image qui doit se répéter verticalement. Quand à ton conteneur interne, tu lui fixera une hauteur qui correspond à celle de ton image de courbe, image que tu lui appliqueras comme fond, sans répétition.

Preuve en est que j'ai du mal à être complet dans mon exposé : j'ai oublié de parler de transparence...

En clair, j'ai une image de fond (<img />) qui change de page en page.
L'ellipse, qui doit en gros tenir dans mon header, la bande qui doit se répéter selon la longueur du texte et le footer doivent gérer une transparence... et donc "laisser passer" l'image de fond telle que définie dans mon (x)HTML. Je mettais donc mon ellipse dans le CSS...

Du coup, j'ai bien peur qu'en agissant de la sorte, les couleurs s'additionnent pour devenir plus foncées sur toute la page, puisque j'appliquerais au conteneur le plus "large" une image qui serait "couverte" par l'ellipse... comme sur le footer.

Enfin, j'ai une question dont je ne trouve pas la réponse.
Comment faire pour que l'image du fichier (x)HTML reste à l'arrière du design que j'applique aux différents div dans mon CSS ? J'ai pensé au z-index (inutile puisqu'il faudrait que ces deux images soient dans le (x)HTML, puis aux blocs (avec un display:inline) mais sans succès.
J'ai alsacreations.com sur mon ordi, trois bouquins dont celui de Raphaël devant moi, mais je suis un peu perdu.

Y a-t-il moyen que l'image du CSS passe au-dessus de celles du (x)HTML ??

Merci de votre patience et pour vos réponses.

Ptipilou a écrit :
Y a-t-il moyen que l'image du CSS passe au-dessus de celles du (x)HTML ??

Clairement, non !

Je ne comprends toujours pas bien ce que tu cherche à faire, mais ce que j'ai compris c'est que les deux images que tu veux faire se superposer participent toutes deux au DESIGN de ton site, est-ce bien le cas ?

Si c'est le cas, pourquoi vouloir avoir une image en dur dans le code html ?
Il te suffit d'avoir deux conteneur superposés contenant chacun une image en fond. Pour utiliser une image qui change à chaque page, il suffirait de donner un identifiant différent au <body> de chaque page, puis spécifier ensuite en CSS que <body id="pageune" affiche comme fond imageune.png, <body id="pagedeux" affiche comme fond imagedeux.png, etc.

Oui, c'est bien le cas. Je pensais l'avoir dit au début, mais apparemment non.

Une page à part, la page d'accueil qui invite le visiteur à visiter les autres pages.
Celle-là ne pose aucun problème pour le moment.

Ensuite, chaque page aura des images communes : la partie graphique (l'ellipse, la bande qui se répètera et le footer, matérialisés par mon schéma barbare), deux images, éléments du header.

En revanche, chaque page aura sa propre image de fond, et c'est apparemment ce qui m'a enduit plein d'erreur : l'image en HTML n'est pas une "background-image" (terme juste, mais CSS) mais une image "contenu" (ce qu'est le (x)HTML, ce qui fait qu'elle prime sur les autres.

J'ai cru bien faire en pensant que l'ellipse pourrait être au-dessus des autres, et puisque commune à toutes les pages, la mettre dans le fichier CSS. Pour éviter au navigateur d'aller chercher une image identique à chaque page plusieurs fois alors qu'il pouvait l'avoir en cache.

Je recherche à optimiser le chargement des éléments graphiques d'une page, comprenez-moi.
En revanche, la superposition de div (margin et padding à 0, voire à moins) avec chacun une image à l'intérieur ne risque-t-elle pas de créer un délai dans le chargement de la page ?

J'apprends, mais j'ai le cerveau un peu lent...
Merci de votre (ton) aide !