Problème de background-image avec plusieurs divs et z-index

thomas-g · 20/11/2010, 19h58

Hello

J'ai cherché sur le net les différentes solutions qui s'offraient à moi pour mettre un fond ajustable en fonction de l'écran visiteur sur un thème perso wordpress 3.0.2.

J'ai retenu la solution en déclarant une classe pour l'image de fond et l'insérer dans une div placée juste après body, ou même directement dans body (les 2 solutions ont le même impact dans ce cas là).

Le rang z index du background est de 1 et le reste est à 2

Le code css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
body {
margin:0;
padding:0;
width:100%
height:100%;
}
 
#body img.etirable {
width : 100%;
height: 100%;
z-index:1;
}
 
#body p {
position: relative;
z-index:2;
}
 
#wrapper {
width:950px;
margin: 0 auto;
z-index:2;
}

NB : c'est le test ou je testais directement dans le body, le test plus "propre" avec une div "arriere" pour l'image donne le même résultat.

Le code html dans header.php :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
</head>
<body>
<img  src="http://wp-content/themes/berthe-1/images/fond1-berthe.jpg" alt="" class="etirable" />
<p> test texte au dessus</p>
<div id="wrapper">

La div "wrapper" étant la div contenant les divs de contenu (header, slides, etc...)

La solution ne marche pas, l'image s'ajuste bien mais, le texte qui est censé se superposer se place à la ligne en dessous de l'image, et la div wrapper passe encore en dessous. En gros rien ne se superposent...

Avez vous des idées ?

Merci d'avance

ornitho13 · 21/11/2010, 18h49

Salut,

ce que tu peux faire c'est mettre en absolue (position:absolute) le texte (donc le <p>) pour le placer par dessus l'image.

++

21/11/2010, 18h49	#2
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	Salut, ce que tu peux faire c'est mettre en absolue (position:absolute) le texte (donc le <p>) pour le placer par dessus l'image. ++
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email