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

    Neva
    Neva
    FémininAge : 27Messages : 18565

    le Dim 24 Nov 2013 - 15: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 - 11:47, édité 3 fois



     
    Rosedesvents
    Rosedesvents
    FémininAge : 32Messages : 97

    le Jeu 16 Avr 2015 - 23:15

    Merci
    Requiem
    Requiem
    MasculinAge : 26Messages : 21

    le Sam 18 Avr 2015 - 17:01

    Merci !!
    kinai0107
    kinai0107
    MasculinAge : 43Messages : 15

    le Mer 22 Avr 2015 - 13:18

    merci
    TchiiChan
    TchiiChan
    FémininAge : 24Messages : 12

    le Ven 24 Avr 2015 - 19:07

    Merci
    Aishitteru
    Aishitteru
    FémininAge : 23Messages : 68

    le Lun 27 Avr 2015 - 13:31

    Merci beaucoup !
    John Parker
    John Parker
    MasculinAge : 36Messages : 58

    le Sam 2 Mai 2015 - 17:52

    Merci beaucoup ! ^^



    Image de fond s'adaptant à toutes les résolutions - Page 6 Ange_s10
    avatar
    Ge.
    FémininAge : 29Messages : 21

    le Dim 3 Mai 2015 - 14:34

    Merci !
    Ryukaï
    Ryukaï
    MasculinAge : 21Messages : 628

    le Dim 3 Mai 2015 - 22:37

    Merci tu me sauve!!



    Image de fond s'adaptant à toutes les résolutions - Page 6 15796010 Image de fond s'adaptant à toutes les résolutions - Page 6 14749110
    MEGALAXY
    MEGALAXY
    MasculinAge : 29Messages : 18

    le Ven 22 Mai 2015 - 1:07

    Veux voir ^^
    Filou
    Filou
    FémininAge : 27Messages : 139

    le Dim 14 Juin 2015 - 2:04

    Cela fait un moment que je cherche la solution.
    Merci pour la partage Very Happy
    Samiki
    Samiki
    FémininAge : 21Messages : 84

    le Lun 22 Juin 2015 - 23:42

    merci, ça va me servir !



    Image de fond s'adaptant à toutes les résolutions - Page 6 Lbxa
    Dakeris RPG ♦ Un monde nouveau régi par la peur
    Le forum ouvre ses portes, nous vous attendons nombreux !

    Flitch
    Flitch
    MasculinAge : 30Messages : 45

    le Lun 6 Juil 2015 - 4:43

    merci
    Elwana
    Elwana
    FémininAge : 22Messages : 42

    le Mer 8 Juil 2015 - 22:06

    Très utile !
    Djeina
    Djeina
    FémininAge : 22Messages : 233

    le Ven 17 Juil 2015 - 18:18

    Merci :)
    Petit poisson
    Petit poisson
    FémininAge : 23Messages : 35

    le Mar 21 Juil 2015 - 12:23

    Merci
    Sorako
    Sorako
    FémininAge : 21Messages : 94

    le Ven 24 Juil 2015 - 14:52

    merci !
    DanJack
    DanJack
    FémininAge : 24Messages : 155

    le Lun 27 Juil 2015 - 22:21

    Merci beaucoup pour cette astuce !!!
    Amariem
    Amariem
    FémininAge : 20Messages : 98

    le Mer 29 Juil 2015 - 23:26

    Wow merci beaucou !



    Image de fond s'adaptant à toutes les résolutions - Page 6 241091dfsdfds
    Tatiana.
    Tatiana.
    FémininAge : 27Messages : 53

    le Mer 29 Juil 2015 - 23:37

    merci
    Lusso
    Lusso
    MasculinAge : 22Messages : 36

    le Sam 1 Aoû 2015 - 23:52

    Merci !
    Sweet Angel
    Sweet Angel
    FémininAge : 36Messages : 152

    le Dim 2 Aoû 2015 - 11:03

    Hâte de le lire, merci
    poloch
    poloch
    MasculinAge : 25Messages : 109

    le Dim 2 Aoû 2015 - 16:32

    Merciiii Very Happy



    Image de fond s'adaptant à toutes les résolutions - Page 6 Sans_t12
    Romann
    Romann
    FémininAge : 25Messages : 183

    le Dim 2 Aoû 2015 - 19:57

    merci ^^



    Image de fond s'adaptant à toutes les résolutions - Page 6 Unicor11
    Khouro13
    Khouro13
    FémininAge : 20Messages : 208

    le Dim 9 Aoû 2015 - 10:05

    Merci !



    Image de fond s'adaptant à toutes les résolutions - Page 6 322292sweetaddictionShinku145
    Kelalin
    Kelalin
    FémininAge : 26Messages : 2069

    le Dim 9 Aoû 2015 - 13:32

    Merci ⊂((・▽・))⊃
    Contenu sponsorisé


      La date/heure actuelle est Jeu 20 Juin 2019 - 11:02