superposition d'un fond et d'une image

**rvm31** · 23/04/2008, 21h49

Bonjour

j'essaye dans le haut de ma page de superposer une image à un fond.
ça fonctionne sous safari, FF, IE6
mais pas avec IE7
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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
  body {
background : rgb(255, 255, 255) url(imghabillage/background-header.jpg) repeat-x scroll center top;
 z-index : 1;
font-size : 10px;
color : rgb(102, 102, 102);
font-style : normal;
font-family : verdana, arial, helvetica, sans-serif;
 
}
 
  div#titre {font-family: "Arial",Times,Verdana;
  text-align: center;
    font-size: 20px;
    color: rgb(0, 155, 0);
    font-weight: bold;
    font-style: italic;
    padding-top: 5px;
    padding-bottom: 15px;
 
  }
 
  div#site { margin: auto;
    text-align: left;
    position: absolute;
    }
 
    div#tab{padding-left:50pt;}
 
 div#header1 {
margin : 0;
padding : 0;
background : url(imghabillage/banniere1.jpg); 
background-repeat : no-repeat ;    background-attachment :scroll; 
 z-index : 2;
background-position-x : center ;;
height : 105px;
}

et la page html

Code html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <title>Les marbres de l'Espiadet</title>
  <meta http-equiv="Content-Language" content="fr" />
  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
  <link type="text/css" rel="stylesheet" media="screen" href="style.css" />
</head>
 
<body>
  <div id="site">
    <div id="header1"></div>
 
    <div id="sous-header">
      <br />
    </div>

**Er3van** · 24/04/2008, 11h01

Il me semble que pour que ton z-index soit interpreté, tes div en question doivent être en postionnement absolu, ce n'est pas le cas pour le moment pour ton #header1

**rvm31** · 24/04/2008, 11h42

je vais voir ça, mais les z index sont un ajout récent. j'avais fait un test pour voir si ça résolvait mon souci. mais avant sans les zindex j'avais la même chose
ça fonctionne sous safari, FF, IE6
mais pas avec IE7

**Er3van** · 24/04/2008, 11h57

J'viens de tester et ça marche.
J'vois pas trop d'où vient ton probleme en fait....

Par contre, dans ton html il manque des balises de fermeture, surement à la copie.
Dans ton css, si tu fais un positionnement absolu, il faut définir top et left, par rapport au point en haut à gauche de l'écran.
Définir le body en absolu ne sert à rien, et par défaut, le z-index c'est celui d'entrée dans le flux, donc body à le plus faible, et ça augmente à chaque fois que qqchose vient dans le flux.
Tu peux donc t'en passer dans ton cas.

Y aussi une erreur au niveau de ton

Code css :

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

background-position-x : center ;;

Il y a deux ';' et ce mot clef n'est pas reconnu.

Si le problème persiste fais le savoir, mais je ne vois pas d'où vient ton problème, enfin, je ne vois pas de problème surtout...

**rvm31** · 25/04/2008, 11h21

ok merci Er3van visiblement c'était effectivement le </div> qui manquait après mon header, IE est plus susceptible que les autres à ces écarts de langage.

**Thes32** · 25/04/2008, 12h20

Salut,
T'as oublié de mettre

superposition d'un fond et d'une image

CSS

Vue hybride

Discussions similaires

Partager

Partager