Problème de background-image sur Mozilla [Résolu]

[quote]Cette div contient une autre div (donc elle sont superposées) qui est du texte. [/quote]
Je dirait inclus plus que superposé, pourquoi mettre un deuxiéme div alors que pour du texte le mieux reste une balise texte( <p> par exemple auquel tu donnes l'ID texte définit par tes css).
Je comprends pas trop a quoi servent les padding et margin de #image-fond, si c'est pour positionner l'image de fond utilise background-position:; et si c'est pour positionner le texte margin-top et margin-right devrait suffire dans ta classe #texte.
Pourquoi mettre: visibility: visible; a moins que tu les définnisse comme invisible précédement ils sont visible.
donc je dirait pour les css:
div.image_fond
{
width=558px;
height:300px;
background-image:url(interface/milieu.jpg);
background-repeat:no-repeat;
background-position: top center;
text-align: center;
}
p.texte{
margin:30px;
}
et pour le html ça donne
<div class="image_fond">
<p class="texte">mon blabla</p>
</div>

Le div posséde une image de fond aligné sur le bord haut et centré horizontalement et contient une balise texte <p> centré avec des marges de 30px en haut, droite, bas et gauche. Si tu veut encore te simplifier la vie tu peut n'utiliser que la balise de texte en la mettant en display:block; (pour pouvoir définir la hauteur/largeur même si vide de texte) et en lui transférant toutes les autres propriétés css du div(background....).
p.texte{
display: block;
width=558px;
height:300px;
background-image:url(interface/milieu.jpg);
background-repeat:no-repeat;
background-position: top center;
text-align: center;
margin:30px;
}

Bonsoir,

Dans le #image_fond, il y a un height: 0px qui provoque ce phénomène...

D'autre part, attention, le cadre prévu pour contenir l'image est plus petit que celui qui doit contenir le texte.
Ensuite, il y a beaucoup de margin et padding à mon goût... en fait, il suffirait de prévoir un/des margin dans le cadre image, et éventuellemen tun/des padding pour le cadre texte.

Tant que j'y suis à regarder ce code ;-) le float: absolute sert à quoi ?
Pour l'attribut visibility, ça ne sert pas à grand chose ici.

Bonne soirée.

Bonjour,

Je ne suis pas sûr que le “height: 0px;” aide à la manœuvre (-;
Ni que “float:absolute;” soit répertorié dans les spécifications CSS (-;
Ni même que du float soit simplement indiqué dans l'exemple que tu donnes.
À quoi te sert-il ?
Et puis, quand tu utilises du float, pense à le faire suivre d'un clear.

Le “name="image_fond"” est-il bien utile ?

--

Bonjour,
Merci pour toutes ces réponses mais il suffisait d'enlever dans le #image_fond un height: 0px.
Solution proposée par bzh56. Merci
Bonne soirée