[IMG] background image

**gianni7033** · 29/08/2009, 17h13

Bonjour à tous,

pour diminuer le nombre de requêtes HTTP, les intégrateurs utilisent un "Sprite" (plusieurs images dans une seule image).

ici je dois mettre des images avec un lien.

Le soucis est que les images ne s'affichent pas en Xhtml sous Firefox.

Est-ce qu'il y a quelques chose d'équivalent ?

Voici mon code

Code :

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

1
2
3
4
5
6
7
8
<!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">
<head>
</head>
<body>
<a href="http://www.mon-site.com"><img style="background-position: -12px -5px; border: 0px; text-decoration: none; background-image:url(images/flag_all.png); width: 18px; height: 12px;" /></a>
</body>
</html>

**marco_fot_hxc** · 01/09/2009, 21h19

Bonsoir,

Sous les autres navigateurs c'est ok ?
Parceque je suis un peu étonné de voir une balise <img /> sans attribut src

Pour faire ce que tu veux faire, je pense qu'il vaut mieux mettre une div avec l'image en background.

**Damouille** · 02/09/2009, 08h37

pour diminuer le nombre de requêtes HTTP, les intégrateurs utilisent un "Sprite" (plusieurs images dans une seule image).

Si on utilise plusieurs images a la place d'une seule. Est-ce qu'on va pas plutot augmenter le nombre de requetes?

**gianni7033** · 02/09/2009, 20h25

Envoyé par marco_fot_hxc

Bonsoir,

Sous les autres navigateurs c'est ok ?
Parceque je suis un peu étonné de voir une balise <img /> sans attribut src

Pour faire ce que tu veux faire, je pense qu'il vaut mieux mettre une div avec l'image en background.

oui sous I.E. ça fonctionne

mais avec un div ça fonctionne pas du tout car ça doit être mis ENTRE la balise <a>, c'est pour faire un lien.

Je mets un div uniquement quand c'est une image de fond

Envoyé par Damouille

Si on utilise plusieurs images a la place d'une seule. Est-ce qu'on va pas plutot augmenter le nombre de requetes?

Je pense que tu ne connais pas les Sprites.

C'est plusieurs images dans une seule image.

Envoyé par Macmillenium

Oui mais attention aussi au poids de l'image

Aucun soucis pour la taille de l'image dans ce cas précis.

Envoyé par Macmillenium

Vérifie la position du background, l'image n'est peut être pas servie avec le bon type MIME aussi (renommer l'extension par exemple).
Cependant, es-tu sûr de faire le bon choix ? les images sont porteuses d'informations ou juste décoratives ?
Si c'est le 2éme cas, je ne pense pas que l'utilisation de l'élément IMG soit une grave erreur sémantique.

Aucun problème avec la position du background, ça s'affiche pas du tout sous firefox en Xhtml.

Ici dans mon cas précis, c'est pour mettre des liens sur des drapeau (en fonction de la langue) mais sur d'autre sites ça va aussi être utile dans d'autre cas.

**Damouille** · 03/09/2009, 08h28

Je pense que tu ne connais pas les Sprites.

Oui, j'ai confondu avec des stripes (strillures en francais), ou on utilise une petite image en repeat pour obtenir un motif.

Je veux bien qu'on m'explique car plusieurs images dans une image, cela ne me parle pas.

**HiRoN** · 03/09/2009, 10h03

Bonjour,

Envoyé par Damouille

Je veux bien qu'on m'explique car plusieurs images dans une image, cela ne me parle pas.

Un complément d'infos ici

**pop_up** · 03/09/2009, 11h13

Est ce que tu as une version en ligne qu'on puisse consulter ?

A tu l'extension firebug ? Si oui, est ce que le chemin de l'image est bien correct quand tu inspectes le code et est ce que en mettant la souris sur le chemin de l'image, il te l'affiche bien ?

**Macmillenium** · 02/09/2009, 11h00

Envoyé par gianni7033

pour diminuer le nombre de requêtes HTTP, les intégrateurs utilisent un "Sprite" (plusieurs images dans une seule image).

Oui mais attention aussi au poids de l'image

Envoyé par gianni7033

Le soucis est que les images ne s'affichent pas en Xhtml sous Firefox.

Vérifie la position du background, l'image n'est peut être pas servie avec le bon type MIME aussi (renommer l'extension par exemple).
Cependant, es-tu sûr de faire le bon choix ? les images sont porteuses d'informations ou juste décoratives ?
Si c'est le 2éme cas, je ne pense pas que l'utilisation de l'élément IMG soit une grave erreur sémantique.

[IMG] background image

CSS

Vue hybride

Discussions similaires

Partager

Partager