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 : 26Messages : 18564

    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
    Rosedesvents
    FémininAge : 30Messages : 90

    le Jeu 16 Avr 2015 - 21:15

    Merci
    avatar
    Requiem
    MasculinAge : 24Messages : 21

    le Sam 18 Avr 2015 - 15:01

    Merci !!
    avatar
    kinai0107
    MasculinAge : 41Messages : 15

    le Mer 22 Avr 2015 - 11:18

    merci
    avatar
    TchiiChan
    FémininAge : 22Messages : 12

    le Ven 24 Avr 2015 - 17:07

    Merci
    avatar
    Aishitteru
    FémininAge : 21Messages : 66

    le Lun 27 Avr 2015 - 11:31

    Merci beaucoup !
    avatar
    John Parker
    MasculinAge : 34Messages : 57

    le Sam 2 Mai 2015 - 15:52

    Merci beaucoup ! ^^



    Ge.
    FémininAge : 27Messages : 21

    le Dim 3 Mai 2015 - 12:34

    Merci !
    avatar
    Ryukaï
    MasculinAge : 19Messages : 611

    le Dim 3 Mai 2015 - 20:37

    Merci tu me sauve!!



    avatar
    MEGALAXY
    MasculinAge : 27Messages : 18

    le Jeu 21 Mai 2015 - 23:07

    Veux voir ^^
    avatar
    Filou
    FémininAge : 26Messages : 138

    le Dim 14 Juin 2015 - 0:04

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

    le Lun 22 Juin 2015 - 21:42

    merci, ça va me servir !




    Dakeris RPG ♦ Un monde nouveau régi par la peur
    Le forum ouvre ses portes, nous vous attendons nombreux !

    avatar
    Flitch
    MasculinAge : 28Messages : 45

    le Lun 6 Juil 2015 - 2:43

    merci
    avatar
    Elwana
    FémininAge : 20Messages : 42

    le Mer 8 Juil 2015 - 20:06

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

    le Ven 17 Juil 2015 - 16:18

    Merci :)
    avatar
    Petit poisson
    FémininAge : 22Messages : 35

    le Mar 21 Juil 2015 - 10:23

    Merci
    avatar
    Sorako
    FémininAge : 19Messages : 94

    le Ven 24 Juil 2015 - 12:52

    merci !
    avatar
    DanJack
    FémininAge : 22Messages : 155

    le Lun 27 Juil 2015 - 20:21

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

    le Mer 29 Juil 2015 - 21:26

    Wow merci beaucou !



    avatar
    Tatiana.
    FémininAge : 25Messages : 53

    le Mer 29 Juil 2015 - 21:37

    merci
    avatar
    Lusso
    MasculinAge : 20Messages : 36

    le Sam 1 Aoû 2015 - 21:52

    Merci !
    avatar
    Sweet Angel
    FémininAge : 34Messages : 145

    le Dim 2 Aoû 2015 - 9:03

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

    le Dim 2 Aoû 2015 - 14:32

    Merciiii Very Happy



    avatar
    Romann
    FémininAge : 23Messages : 183

    le Dim 2 Aoû 2015 - 17:57

    merci ^^



    avatar
    Khouro13
    FémininAge : 18Messages : 208

    le Dim 9 Aoû 2015 - 8:05

    Merci !



    avatar
    Kelalin
    FémininAge : 24Messages : 1518

    le Dim 9 Aoû 2015 - 11:32

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


      La date/heure actuelle est Sam 29 Juil 2017 - 13:49