Discussion :

[Gizmil]

C'est décidé, je passe au XHTML+CSS pour mon site, ça me permettra d'être aux normes W3C et compatible avec un maximum de naviguateurs!

Seulement, les premiers problèmes arrivent! Voilà, je voudrais placer des images dans mes div mais la propriété css background-image ne fonctionne pas, elle fonctionne uniquement pour la balise body. J'ai essayé sous IE et Firefox et le résultat est le même! Comment explique cela?

Mon code html:

Code :

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

1
2
3
4
<div id="header">
	<div id="logo"></div>
	<div id="motif2"></div>
</div>

Mon code CSS:

Code :

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

1
2
3
4
5
6
7
8
div#logo  {
	float:left;
	background-image:url(images/head_logo.gif);
}
div#motif2  {
	float:left;
	background-image:url(images/head_motif2.gif);
}

Par ailleurs, qu'est-ce qui est le plus logique? Utiliser <img> ou la propriété background?

[Shinuza]

Salut,

Si les élements auquels tu appliques un background n'ont pas de hauteur, tu ne risque pas de voir le background.

Essaye de mettre du contenu dans lol et motif2.

[BnA]

Salut!

Pour répondre à ta question quant à quelle "méthode" utiliser (background-image ou <img>), ça dépend en fait (comme beaucoup de choses)...

Comme son nom l'indique, la propriété CSS background-image n'est en théorie utilisée que lorsque l'on veut mettre un arrière-plan graphique sur une zone (bandeau de menu e.a.).

La balise <img> est quant à elle préférée lorsque tu utilises ton image comme élément de contenu.

Bien entendu, il se peut que tu aies à "tricher", en mettant par exemple une image "de contenu" dans un background, pour une raison X ou Y.

Mais la logique voudrait que l'on travaille comme cela.

Donc, pour résumer:
- CSS background-image --> "décoration"
- HTML <img> --> "contenu"

[rems033]

Il faut absolument que tu attribues une hauteur et une largeur correspondant à la taille de l'image que tu veux insérer

Code :

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

1
2
3
4
5
6
7
 
#content {
      height: ***px ;
      width: ***px ;
      background-image:url(tonDossier/tonImage.jpg);
}
etc...

j'espere que ca a résolu ton probleme auquel cas mark le comme résolu
A plus

[Gizmil]

Okkk! Effectivement, ça marche mieux comme ça!

Merci pour votre aide!

Disons que j'aimerais effectuer une répétition de motifs dans l'en-tête de mon site. C'est une répétition qui, au final, va constituer une partie d'une image qui elle-même constitue la présentation graphique de mon site. Je suppose qu'utiliser background en css est le mieux indiqué pour faire ça...

[BnA]

Oui, en effet, pour ce que tu cherches à faire, le CSS est plus "flexible", dirons-nous.

Juste un petit conseil...

Tu peux rassembler les balises background-??? (background-image, background-color, background-attachment, background-repeat,...) sous la seule balise background.

Tu aura alors un truc comme ceci:

Code :

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

1
2
3
4
5
 
 
#exemple{
    background: #color url(image.jpg) no-repeat right bottom;
}

Dans cet exemple, ta div #exemple aura comme background l'image, mais affichée une seule fois (pas de mosaïque comme tu le désire), et elle se positionnera en bas à droite de ta div.

Aussi, spécifie toujours une couleur de fond (même si elle sera overwritée par ton image), car si, pour une raison X ou Y le serveur où ton image est stockée est down (dans le cas d'un serveur distant), tu risque d'avoir alors une div avec un fond de couleur totalement inadéquat.

Et donc, ton CSS donnera un truc dans le genre:

Code :

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

1
2
3
4
5
6
 
#taDiv{
    width:600px;
    height:150px;
    background:#couleur_proche_de_celle_de_ton_image url(tonImage.jpg) repeat;
}