AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Image de fond s'adaptant à toutes les résolutions

    Partagez
    avatar
    Neva
    FémininAge : 25Messages : 18562

    le Dim 24 Nov 2013 - 12:19

    Rappel du premier message :


    Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
    Lien pour comprendre pourquoi le contenu n'est pas sous hide


    IMAGE DE FOND FIXE S'ADAPTANT À
    TOUTES LES RESOLUTIONS

    Par défaut, si vous insérez une image de fond trop grande pour certaines résolutions, celle-ci est coupée. Le but de cette astuce est de vous permettre de mettre une image de fond sur votre forum qui apparaîtra à peu près pareil sur toutes les résolutions. Pour cela, cette image sera obligatoirement fixe (lorsque vous scrollez vers le bas de votre forum, l'image ne bouge pas).

    A noter que le résultat ne sera pas totalement le même d'un écran à l'autre étant donné que les proportions des écrans peuvent changer (exemple de deux résolutions courantes : 1136*768px et 1024*768px => alors qu'on a la même hauteur, l'un est plus large que l'autre) mais cette solution permet tout de même d'harmoniser l'affichage au maximum sans déformer les proportions l'image.


    Complétez ce code avec l'adresse de votre image et insérez-le dans votre CSS :

    Code:
    body {
      background: url('http://adresse de votre image') no-repeat center fixed;
      background-size: cover;
    }
    L'image doit être assez grande pour convenir à toutes les résolutions sans être pixelisée. 2560*1440px est la plus grosse des résolutions que j'ai trouvée mais elle paraît encore très peu utilisée (0,61%  selon http://fr.screenresolution.org/). Par contre, 1920*1080px semble être une grande résolution courante que je vous conseille de prendre en référence.
    Attention au poids de votre image ! Je vous conseille d'enregistrer en JPG (le PNG est bien plus lourd) et n'hésitez pas à essayer de baisser la qualité du JPG dans les options d'enregistrement afin de voir le poids que vous pouvez atteindre sans affecter le rendu de l'image.

    MAJ 18 juin 2014 : retrait des préfixes dans le CSS, devenus obsolètes


    Dernière édition par Neva le Mer 18 Juin 2014 - 9:47, édité 3 fois



     
    avatar
    nuanciel
    FémininAge : 25Messages : 116

    le Jeu 17 Avr 2014 - 11:24

    merci beaucoup ^^
    avatar
    SweetieJoker
    FémininAge : 26Messages : 13

    le Jeu 17 Avr 2014 - 20:54

    Merci beaucoup o:
    avatar
    Florian Takiya
    MasculinAge : 22Messages : 61

    le Ven 18 Avr 2014 - 20:11

    Merci beaucoup !!
    Swoo
    FémininAge : 18Messages : 9

    le Sam 19 Avr 2014 - 10:42

    Merci !
    avatar
    Thorn
    MasculinAge : 16Messages : 422

    le Mar 22 Avr 2014 - 16:31

    Merci !^^



    avatar
    Doctor Who
    MasculinAge : 23Messages : 160

    le Jeu 8 Mai 2014 - 18:53

    Merci :)





    DOCTOR WHO ☼
    © Yamashita d'épicode
    avatar
    Jigsaw.
    FémininAge : 26Messages : 17

    le Ven 16 Mai 2014 - 16:21

    Merci ! Very Happy
    avatar
    Féhéla
    FémininAge : 43Messages : 232

    le Sam 24 Mai 2014 - 16:45

    génial merci !
    Puchlu
    MasculinAge : 28Messages : 98

    le Lun 26 Mai 2014 - 16:30

    Merci ; ).
    avatar
    Clarisse
    FémininAge : 17Messages : 3931

    le Mar 27 Mai 2014 - 23:30

    Merci! =)
    avatar
    benficagirl
    FémininAge : 31Messages : 289

    le Ven 30 Mai 2014 - 21:27

    Merci =D
    Gedomaru
    FémininAge : 19Messages : 69

    le Dim 1 Juin 2014 - 0:29

    Arigatou~~
    avatar
    Eerie Ange's
    FémininAge : 15Messages : 162

    le Dim 1 Juin 2014 - 12:44

    Merci :3
    avatar
    Sachem
    FémininAge : 20Messages : 51

    le Dim 1 Juin 2014 - 20:22

    Merci ! ♥
    avatar
    Jawilsia
    FémininAge : 25Messages : 143

    le Mar 3 Juin 2014 - 0:30

    Merci *.*
    avatar
    Livia666
    FémininAge : 29Messages : 49

    le Ven 6 Juin 2014 - 21:10

    Pratique !! Merci !
    avatar
    Ukrysis
    FémininAge : 20Messages : 61

    le Dim 8 Juin 2014 - 12:35

    Merci ! :)
    avatar
    Babouine
    FémininAge : 23Messages : 17

    le Dim 8 Juin 2014 - 13:04

    Merci pour ce code *.*
    avatar
    Nathouille
    FémininAge : 25Messages : 67

    le Lun 16 Juin 2014 - 20:35

    Merci ! =)
    avatar
    Del
    MasculinMessages : 110

    le Mar 17 Juin 2014 - 17:24

    Merci.



    « Run you clever boy and remember... »
    En ligne
    avatar
    Onyx
    FémininAge : 23Messages : 2882

    le Mer 18 Juin 2014 - 0:50

    Merci Razz



    avatar
    Mitsuomi73
    MasculinAge : 24Messages : 42

    le Jeu 19 Juin 2014 - 16:24

    Merci beaucoup
    avatar
    bubulle
    FémininAge : 29Messages : 76

    le Ven 20 Juin 2014 - 16:14

    merci
    misakii
    FémininAge : 19Messages : 37

    le Ven 20 Juin 2014 - 18:53

    merci
    avatar
    Philia
    FémininAge : 23Messages : 16

    le Ven 20 Juin 2014 - 21:17

    merci beaucoup, ça fait un bout de temps que je cherchais ça Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Sam 29 Avr 2017 - 19:23