Problème de background-image avec plusieurs divs et z-index
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:
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:
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
