BlogBang

Comment mettre un background sur une image transparente en CSS

Par Korben | Nb visites : 327

image3lb3 Wikipedia quitte Red Hat pour Ubuntu

Petite astuce CSS vu dans la feuille de style de Wikipedia que je n’ai pas encore testé. Il est apparement possible de mettre une image de fond (background) à une image.

#file img {
background: url("http://upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png") repeat;
}

L’objectif est en fait de mettre un fond aux images transparentes… J’adore !

Publicité

Je vous recommande aussi la lecture des sujets suivants


Faites un lien vers cette news sur votre site



23 commentaires

  1. Lenalee Reply to this comment


    C’est déjà connu de tout le monde, mais bon ._.

    Posté le 24 décembre 2008 à 12:14:06

  2. Roultabie Reply to this comment


    @Lenalee: Quels rabat joie!

    En deux billets, deux commentaires « c’est tout vieux mec, je connais ça depuis longtemps »

    Ça n’apporte rien de constructif, un « C’est vieux mais peu connu, c’est utilisé surtout pour… » Serait quand même mieux.

    On s’en fout que ce soit connu de tout le monde, pas de moi, pas de Korben et d’autre surement.

    Lenalee, si tu le connais, ça ne veux pas dire que « tout le monde » le connais.

    Merde quoi ;)

    Posté le 24 décembre 2008 à 12:19:36

  3. Julien Reply to this comment


    Connu effectivment, mais peu utilisé, peut-ètre que ça pose un soucis avec certains navigateurs …

    Et ça ne sert pas qu’aux images transparentes hein ! ça sert aussi à faire de jolies bordures sur une image avec un padding ;)

    Posté le 24 décembre 2008 à 12:29:29

  4. chris Reply to this comment


    Des info sur la compatibilité de cette methode avec Internet Explorer?

    Posté le 24 décembre 2008 à 12:30:03

  5. Roultabie Reply to this comment


    @Julien: Voila un commentaire constructif: « c’est connu mais utile ausi pour ça » :D

    Dites, vous savez ou est Korben? Car à part une tranche de Bacon sur son site Je ne le vois pas ;)

    Posté le 24 décembre 2008 à 12:37:52

  6. kane Reply to this comment


    @chris: Ah ! Voilà un com constructif…

    Personne pour Test ?

    @Korben:
    En parlant d’astuces techniques frôlant le hack :
    Tu met ça en haut de ton index.php, et automatiquement ça envoi l’erreur quand elle se produit par un formulaire à un autre script, où tu peux la traiter et informer le visiteur d’un problème temporaire; seules véritable limitation: si le JS est désactivé chez le client ou réglages serveurs restrictifs (je vais test chez free voir ce que ça donne), mais bon :

    function catchFatalErrors($p_OnOff=’On’){
    ini_set(‘display_errors’,'On’);
    $phperror= »;
    ini_set(‘error_prepend_string’,$phperror);
    $phperror=’ document.catcher.fatal.value = document.getElementById(« phperror »).innerHTML; document.catcher.submit();’;
    ini_set(‘error_append_string’,$phperror);
    }
    catchFatalErrors();

    Posté le 24 décembre 2008 à 12:45:50

  7. pickupjojo Reply to this comment


    Petite astuce CSS pour les Skyblogs :

    body {
    display: none;
    }

    Merci et joyeux Noël. :)

    Posté le 24 décembre 2008 à 13:44:53

  8. Mich Reply to this comment


    @pickupjojo
    Merci pour cette superbe astuce, je trouve les skyblog magnifique désormais.

    @korben
    Merci pour l’astuce

    Posté le 24 décembre 2008 à 13:59:16

  9. Cerium Reply to this comment


    Pas mal pickupjojo :p il y aussi plus radical avec un window.close() en JS :D

    Posté le 24 décembre 2008 à 14:42:30

  10. Phantasmes Reply to this comment


    @Lenalee: Même pensée, désolé Korben!

    Posté le 24 décembre 2008 à 15:17:28

  11. Dixours Reply to this comment


    Je suis désolé, je dois être le boulet de la bande (il en faut bien 1 hein…) mais j’ai pas pigé le truc. En fait, ce CSS permet de superposer 2 images c’est ça ? Pour un peu que celle du dessus soit transparente, elle laisse apparaitre celle du dessous ? Ca fonctionne qu’avec le png ou aussi le gif ? Ca passe sous IE ?

    Posté le 24 décembre 2008 à 15:50:21

  12. babelkot Reply to this comment


    Non « Dixours,nous sommes 2..Ici ,nous sommes chez des pros qui ne parlent que par affirmations lapidaires..mais sans rien montrer de concret,évidement…

    Posté le 24 décembre 2008 à 15:55:48

  13. blusydays Reply to this comment


    @ Dixours & babelkot

    on est 3 boulets dans ce cas :-D j’ai pas trop pigé.
    Si une âme charitable peut expliquer aux profanes que nous sommes à quoi ça sert.

    Posté le 24 décembre 2008 à 16:59:59

  14. Locace Reply to this comment


    Dans le meme style regardez donc le footer du site de starcraft 2. super simple, super kiffant : http://eu.starcraft2.com/

    Posté le 24 décembre 2008 à 18:32:09

  15. Achille Reply to this comment


    @chris: il n’y a pas de problème de compatibilité .. il s’agit ici simplement de mettre un background .. les nouvelles versions d’IE gèrent la transparence PNG, au delà de ça, « l’astuce » fonctionne avec un gif également (ou avec n’importe quoi dont le background peut être changé en CSS). Et pour les puristes, du PNG avec fond transparent et couleurs indexées passe très bien sur toutes les version d’IE .. par contre la qualité ..

    Sans vouloir faire de l’auto-promo ou quoi que ce soit : http://blog.andreloconte.com

    Le background change aléatoirement, l’un des backgrounds (~5) est le motif auquel korben fait référence, comme je le disais plus haut, le même principe appliqué à un bloc (div) plutôt qu’une image.

    Pour ceux qui ne comprendraient pas la subtilité de la chose : dans les logiciels d’édition graphique, il faut bien remplacer le « vide » (quand il n’y a rien) par quelque chose, et bien c’est ce motif (quadrillé gris/blanc) qui est communément utilisé.

    Posté le 24 décembre 2008 à 19:20:24

  16. babelkot Reply to this comment


    Toujours rien pigé…Juste pour info en français « footer » se dit « pied de page »… :-)

    Posté le 24 décembre 2008 à 19:38:22

  17. Achille Reply to this comment


    @babelkot: Screenshot de Photoshop :

    http://www.omicronlab.net/upload/upic-0562300001230144511.png

    « Korben will rule the world » et autour, du vide.
    Vide représenté par un quadrillé blanc/gris.

    Posté le 24 décembre 2008 à 19:50:11

  18. babelkot Reply to this comment


    Merci Achille,mais pour moi c’est un GIF avec fond transparent,comme j’en ai fais des centaines… :-(

    Posté le 25 décembre 2008 à 00:28:15

  19. Achille Reply to this comment


    L’avantage du PNG par rapport au gif réside tout d’abord en la qualité d’image que tu pourras obtenir. Le PNG a été mis au point pour répondre aux besoins de transparence notamment (transparence ne veut pas dire « fond vide », transparence signifie « voir à travers »), ainsi, en PNG tu pourras trouver des images dont l’opacité est de 50% (les plus avertis parleront « d’utilisation réelle du canal alpha »), chose impossible avec le GIF. Ensuite – et de mémoire donc à vérifier – le PNG contrairement au GIF, fait partie des recommandations du W3C (organisme chargé de proposer des standards afin que le web soit meilleur [accessibilité et interopérabilité des contenus notamment]).

    Pour répondre à l’évolution du web et aux besoins d’images en mouvement de faible poids et de bonne qualité, le format aPNG a vu le jour et bien qu’il ne soit actuellement exploitable que sous Firefox 3+, il représente déjà la mort du gif animé à terme.

    Pistes de réponses plus c omplètes :

    - [FR] http://openweb.eu.org/articles/png_vs_gif/
    - [FR] http://www.css-ig.net/docs/formats_images_web/

    Posté le 25 décembre 2008 à 13:11:36

  20. Pouet Reply to this comment


    Bonjour,
    Achille tu oublies que le *.png transparent n’a pas de transparence sous IE 6, et crois moi sur des sites généralistes (=pas fréquentés uniquement par des GEEKS), ça represente encore une part non négligeable.

    Posté le 26 décembre 2008 à 09:11:24

  21. Achille Reply to this comment


    Nativement non, mais un petit script permet de régler ça :)

    C’est ici que ça se passe : http://www.siteduzero.com/tutoriel-3-12629-les-png-24-bits.html

    Posté le 26 décembre 2008 à 11:46:18

  22. Guillaume De Thomas Reply to this comment


    La question que je me pause est… Que faisais tu sans la feuille de style de Wikipedia ? :)

    Posté le 27 décembre 2008 à 00:32:10

  23. Mike Reply to this comment


    Panda Internet Security 2009 – 75% off until 12/31/08Here’s the link, it’s going for $20 now, when it normally goes for $80. This is a legit 3 license copy direct from the company. Not a gray market OEM found online.Panda is a really good antivirus/firewall/IPS coupled with anti-spam, web filter and backup tools.It’s here:

    https://shop.pandasecurity.com/cgi-bin/shop/reg=US/ml=EN?ID=B12IS09ESD&track=89189

    Panda will stop this deal after 12/31.

    Posté le 31 décembre 2008 à 11:17:23