Détail du bug css de la css : background-image

Explication de la gestion des bugs background-image css

Définition bugs background-image


Vous trouverez ci-dessous divers bugs d'interprétation de la css background-image.
Ces bugs ont été transmis par les internautes du site.
J'ai vérifié certains bugs mais pour la plupart de bugs css "non vérifiés", ils sont soit sur des navigateurs MAC soit sur un navigateur que je ne possède pas.
Ceux que j'ai pu visualiser sont notés
Bug vérifié : oui

Bug background-image n°1

Bug background-image mis par dmc

Système d'exploitation : windows xp
Navigateur : Internet Explorer 6
Bug vérifié : oui

Problème avec background-image:
Les PNG transparents ne fonctionnent pas sous Internet Explorer < 7
Solution du problème par DMC :

Vous pouvez utiliser la propriété css filter d'Internet Explorer 5+:
Exemple de code :
<div id="fils"><a href="feuille_css_background_image.html">Png en Background</a></div>

Code css :
Exemple de code :
#fils{
display:block;
width:600px;
height:600px;
border:1px solid red;
background-image:url(png.png);
/*_background-image n'est reconnue ue par Ie*/
_background-image:url(no-image);
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src='png.png',sizingMethod='image') ;
/*
sizingMethod :
- 'scale'
- 'image'
- 'crop'
*/
}
/* Débloque le lien */
#fils a{
position: relative;
z-index: 1;
}

Vous pouvez utiliser la propriété css filter que dans un cas possible :
- que la taille de votre block soit de la même taille que l'image.
- l'image ne se répète pas.

La propriété css filter supprime le curseur s'il est appliqué sur un lien, ajouter une propriété css cursor si ce phénomène apparaît.

Exemple le block s'adapte à la taille du png 153x135 avec bug sur lien :

Exemple le png s'adapte à la taille du block 200x200 (sizingMethod='scale'):

Bug background-image n°2

Bug background-image mis par Dmc

Système d'exploitation : windows xp
Navigateur : Internet Explorer 6, 7
Bug vérifié : oui

Problème avec background-image:
Quand on met une image de fond sur un champ input type text, l'arrière plan se déplace quand on tape plus de texte que ne peut en contenir la zone visible du champ.
Code css :
Exemple de code :
input{
  background-image:url(background.jpg);
  background-repeat: no-repeat;
}

Code HTML :
Exemple de code :
<input name="monchamp" type="text" value="" />

Exemple :

Solution du problème par DMC :

Pour régler le problème vous devez spécifier la propriété css background-attachment à fixed
Code css :
Exemple de code :
input{
  background-image:url(background.jpg);
  background-repeat: no-repeat;
  _background-attachment : fixed;
}

Code HTML :
Exemple de code :
<input name="monchamp" type="text" value="" />

Exemple :


Attention se hack ne marche pas sous Internet Explorer 7

Reporter un bug ou problème d'interprétationavec la propriété background-image