Explication de la gestion des bugs background-image CSS
Définition bug background-image CSS
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 des bugs CSS "non vérifiés", c'est que je ne possède pas le navigateur sur lequel a été détecté le bug.
Ceux que j'ai pu visualiser sont notés :
Bug vérifié : oui.
Bug background-image CSS n° 1
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 :input{
background-image:url(background.jpg);
background-repeat: no-repeat;
}
Code HTML :<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 :input{
background-image:url(background.jpg);
background-repeat: no-repeat;
_background-attachment : fixed;
}
Code HTML :<input name="monchamp" type="text" value="" />
Exemple :
Attention se hack ne marche pas sous Internet Explorer 7
Bug background-image CSS n° 2
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+:<div id="fils"><a href="feuille_css_background_image.html">Png en Background</a></div>
Code css :#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'):