[HTML/CSS]z-index Fermé

Question

Bonjour, J'ai un souci de positionnement Z en CSS. A force de recherche, j'ai fini par comprendre qu'il est impossible d'étirer le background a la taille selon la résolution, je me suis donc mis en tete de mettre mon image de fond dans une simple balise img avec la propriété width=100%.

Cela fonctionne a merveille, mais le probleme c'est que maintenant, j'ai mon image en tete de la page, et tout le texte en dessous, alors que je voudrais qu'il soit sur l'image, pour qu'elle fasse background. La propriété CSS z-index devrait me permettre de placer le reste de la page (que j'ai mis dans une div) sur l'image. Voila donc ma div:

...

et voila mon CSS: .fond { z-index:1; } .general { z-index:10; } Avec ça, normalement, l'image devrait se placer SOUS la div, n'est-ce pas ? Pourquoi cela ne marche pas ? L'image reste en tete de page, et la div en dessous Quelqu'un a une idée ?

Leahkim · Accepted Answer

Bon, je vais expliquer la solution ici, mais je l'avait posée dans un autre topic, excusez moi. Mon souci pour creer cet intranet est que nous avons des machines en 800x600 sur du 15", et des dévolppeurs graphiques en 2400x1600 sur du 24" ou du 30". Il me fallait donc un moyen d'adapter le background a tous les écrans. Que se soit dans le css ou le html, si on utilise la propriété background, l'image reste elle meme, on peut l'empecher de se répéter, on peut enlever la barre de défilement si l'imag eest trop grande, etc. mais on ne peut pas l'adapter a l'écran. J'ai donc eu une autre idée. Barbare, mais soit. j'ai posé mon image dans une balise img (propriété width=100% pour qu'elle d'adapte), avec un id, et le reste de ma page dans une div avec un id également. L'exemple de la page d'acceuil n'a pas eu besoin de la div, j'ai mis un id aux autre éléments pour les placer séparemment. J'ai ensuite positionné avec des padding et margin négatives la div sur l'image. Au moment ou j'ai posté ça, je ne savais pas que les z-index quand ils ne sont pas précisés sont automatiquement supérieur a l'élément du code précédent. J'ai donc utilisé cette propriété automatique. La réponse a la question telle que je l'avais posée était qu'il fallait précisé la position, absolute ou relative pour que la propriété z-index soit lue. je poste ci dessous le code de ma page d'acceuil: le HTML Accueil

ACCES INTRANET

le CSS: body { height: 100%; width: 100%; margin:0; padding:0; text-align:center; font-weight: bold; } #fond { height: 100%; width: 100%; } #lien { margin-top:-18%; margin-left:45%; font-size:200%; color:white; } a { text-decoration: none; } Je suis a votre disposition si vous avez des remaques^^

Matproux · Answer

As-tu essayé de mettre

. Je crois que lorsque dans ton CSS tu fait "." c'est pour class et "#" c'est pour id.

I'm_Here · Answer

Bonsoir,

ça n'est pas une bonne idée de mettre une image de fond dans le tag <img> met le dans la propriété BACKGROUND-COLOR avec le SELECTEUR BODY.

Ton texte reste en dessous de l'image puisque l'image est interprété comme un flux de données une suite de codes qui ressemble à une châine de caractère, c'est pour cette raison que la balise IMG est une balise dite en-ligne (inline) et non pas (block), de ce fait elle (l'image) suit le flux naturellemnt elle est considéré comme du texte....

dans ton cas change le caractère spécial que t'as montré Matproux, mets l'image dans le body pourqu'elle prenne remplisse tout le contenu de la fenêtre puis tu as le choix entre mettre ton contenu textuel dans un bloc puis le positionner avec Position:absolute, ou bien utiliser les marges...

bonne chance et bon codage

I'm_Here · Answer

salut,

j'ai fait une faute de frappe : BACKGROUND-COLOR devient BACKGROUND-IMAGE:

je m'excuse :)

[HTML/CSS]z-index

4 réponses

Discussions similaires