Rechercher : dans
Par :

Problème de background-image sur Mozilla

Dernière réponse le 2 nov 2007 à 17:22:10 Melny, le 1 nov 2007 à 20:14:23 
 Signaler ce message aux modérateurs

Bonjour,
J'ai mis une image de fond dans une div.
Cette div contient une autre div (donc elle sont superposées) qui est du texte.
Sous IE, on voit bien l'image de fond et le texte se met par dessus sans aucun problème.
Sous Mozilla, on ne voit plus l'image car elle est cachée par le texte. Pourquoi ?

Voici mon code css :
#image_fond
{
float:left;
margin-left:10px;
padding-top: 10px;
padding-left: 5px;
margin-top:0px;
height: 0px;
width: 155px;
background-image:url(interface/milieu.jpg);
background-repeat:no-repeat;
visibility:visible;
}

#texte
{
float:absolute;
margin:30px;
height:300px;
width:558px;
overflow:auto;
top:0px;
visibility:visible;
}

Voici la partie HTMML correspondante:
<div name="image_fond" id="image_fond">
<div name="texte" id="texte">
bla bla bla
</div>
</div>

Configuration: Windows XP
Firefox 2.0.0.8

Meilleures réponses pour « Problème de background image sur Mozilla » dans :
[Word] Image de fond VoirIl est possible sous Microsoft Word d'afficher une image en arrière-plan dans un document en cliquant sur le menu Format, puis sur Arrière-Plan et enfin sur Motifs et textures. Dans l'onglet Image, cliquer sur le bouton "Sélectionner une image"....
Les arrière-plans VoirInsérer une image en fond Il est possible de définir une image d'arrière-plan pour la page web grâce aux attributs de la balise  : Attribut Effet Visuel BACKGROUND="image" Affiche l'image en arrière...
Les feuilles de style VoirPropriétés de polices Propriété Valeur Description font-family Police précise (Arial, Times, Verdana) Famille (serif, sans-serif, fantasy, monospace, cursive) Définit un ou plusieurs nom de polices ou de familles de...

1

bzh56, le 1 nov 2007 à 20:36:46
  • +2

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.

Répondre à bzh56

2

Gihef, le 1 nov 2007 à 20:43:01

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 ?

--

Répondre à Gihef

3

magicite, le 1 nov 2007 à 21:28:40

[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;
}

Répondre à magicite

4

 Melny, le 2 nov 2007 à 17:22:10

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

Répondre à Melny