mozilla
Vos résultats de recherche

    background-image

    Résumé

    La propriété CSS background-image définit les images d'arrière-plan d'un élément. Les images sont dessinées successivement commes des calques empilés, avec la première image définie sur le dessus, comme si elle était la plus proche de l'utilisateur. Les bordures de l'élément sont dessinés au dessus des images, et la couleur de fond est dessinée en-dessous.

    Comment l'image est dessinée en relation avec son conteneur et ses bordures est défini par les propriétés background-clip et background-origin.

    Si l'image indiquée ne peut pas être dessinée (par exemple parce que le fichier à l'adresse URI indiquée ne peut pas être chargé) les navigateurs la traiteront comme s'il s'agissait de la valeur none.

    Note : Les Web Développeurs doivent toujours s'assurer de spécifier une background-color, même si l'image est opaque et que la couleur ne devrait pas s'afficher dans des circonstances normales ; si l'image ne peut pas être chargée, par exemple quand la connexion est coupée, la couleur de fond sera utilisé en recours.

    Syntaxe

    background-image: image-de-fond[, image-de-fond]*
    

    où :

    image-de-fond
    est une <image> ou le mot-clef none : indique l'image à afficher ou l'absence d'image. Il peut y avoir plusieurs images si les fonds multiples sont supportés.

    Exemples

    Voir l'exemple sur une page

    body { background-image: url("images/darkpattern.png"); }
    
    div { background-image: url("images/foo.png"), url("images/bar.png"); }
    
    p { background-image: none; }

    Spécifications

    Spécification Statut Commentaire
    CSS Backgrounds and Borders Module Level 3 Candidate Recommendation La propriété a été étendue pour supporter les fonds multiples et toute donnée CSS du type <image>.
    CSS 2.1 Recommendation La façon dont les images avec ou sans dimensions intrinsèques sont gérées, est maintenant décris.
    CSS 1 (traduction française) Recommendation  

    Compatibilité des navigateurs

    Fonction Firefox (Gecko) Chrome Internet Explorer Opera Safari
    Support de base 1.0 (1.7 ou moins) 1.0 4.0 3.5 1.0
    Fonds mutliples 3.6 (1.9.2) 1.0 9.0 yes 1.3
    Dégradés 3.6 (1.9.2)-moz 1.0-webkit 10-ms 11+-o 4.0-webkit
    Images SVG 4.0 (2.0) 8.0 9.0 9.5 5.0 [1]
    element() (Oui)-moz ? Pas de support Pas de support Pas de support
    image-rect() (Oui)-moz Pas de support Pas de support Pas de support Pas de support
    Toute valeur <image> Pas de support ? ? ? ?
    Fonction iOS Safari Opera Mini Opera Mobile Android Browser
    Support de base (Oui) (Oui) (Oui) (Oui)
    Fonds multiples (Oui) (Oui) (Oui) (Oui)
    Dégradés

    (Oui)-webkit

    ancienne syntaxe webkit pour iOS 5.0 et plus ancien

    ? ?

    (Oui)-webkit

    ancienne syntaxe webkit

    Images SVG (Oui) [1] (Oui) (Oui) Pas de support
    element() (Oui) ? ? ?
    image-rect() (Oui) Pas de support Pas de support Pas de support
    Toute valeur <image> Pas de support ? ? ?

    Notes

    [1] Le support de SVG dans les arrières-plans CSS est incomplet dans la version actuelle de Safari iOS (5.0). Même chose pour Safari avant 5.0.

    Voir également

    Étiquettes et contributeurs liés au document

    Contributors to this page: teoli, Fredchat, tregagnon, FredB, Mgjbot, Kyodev
    Dernière mise à jour par : teoli,
    Masquer la barre latérale