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
    Hatsuharu
    FémininAge : 26Messages : 34

    le Mer 6 Jan 2016 - 14:16

    Niquel ! Merci
    avatar
    Dorin
    FémininAge : 42Messages : 25

    le Sam 9 Jan 2016 - 5:55

    Merci pour le partage!
    avatar
    Skullewen
    FémininAge : 21Messages : 17

    le Lun 18 Jan 2016 - 23:32

    merci
    avatar
    MeowLowDee
    FémininAge : 25Messages : 72

    le Ven 29 Jan 2016 - 12:34

    Merci Very Happy
    Nal Souclade
    MasculinAge : 18Messages : 163

    le Mer 3 Fév 2016 - 18:27

    Merci c: !
    avatar
    Vador
    MasculinAge : 16Messages : 63

    le Dim 7 Fév 2016 - 16:09

    Merci.
    avatar
    vadorica
    MasculinAge : 21Messages : 47

    le Lun 8 Fév 2016 - 20:10

    mercici



    avatar
    Espoir
    FémininAge : 22Messages : 53

    le Mer 10 Fév 2016 - 13:34

    Merciiii ! ♥
    avatar
    vadorica
    MasculinAge : 21Messages : 47

    le Ven 12 Fév 2016 - 12:56

    merci



    avatar
    Suisen
    FémininAge : 23Messages : 52

    le Sam 13 Fév 2016 - 18:02

    Merci beaucoup ♥
    avatar
    Nunna
    FémininAge : 20Messages : 48

    le Lun 15 Fév 2016 - 21:00

    Merci :)
    avatar
    Yukie
    FémininAge : 18Messages : 26

    le Mer 17 Fév 2016 - 18:59

    Merci ham3
    avatar
    Tempy
    FémininAge : 19Messages : 76

    le Mar 23 Fév 2016 - 16:22

    Merci !
    avatar
    Stiou
    FémininAge : 23Messages : 42

    le Mer 24 Fév 2016 - 21:01

    Super utile, merci !! Very Happy



    avatar
    Coco-Lapin02
    MasculinAge : 49Messages : 147

    le Sam 26 Mar 2016 - 15:43

    Merci
    avatar
    Edward Speleers
    FémininAge : 29Messages : 452

    le Ven 1 Avr 2016 - 15:00

    Pile ce que je recherche, merci



    avatar
    Pitch69
    FémininAge : 19Messages : 26

    le Ven 1 Avr 2016 - 15:06

    Oh, merci beaucoup, c'est utile !
    avatar
    Dreamyland
    FémininAge : 20Messages : 87

    le Ven 1 Avr 2016 - 18:47

    Merciii
    avatar
    Bandersnatchy
    FémininAge : 24Messages : 20

    le Lun 4 Avr 2016 - 13:19

    Merci
    avatar
    Eil'liathan Tyan'Lirulin
    FémininAge : 26Messages : 315

    le Lun 4 Avr 2016 - 23:16

    Merci ^^
    Pinke
    FémininAge : 23Messages : 52

    le Mar 5 Avr 2016 - 21:00

    Thanks !
    avatar
    Mondo Gecko
    MasculinAge : 32Messages : 51

    le Jeu 7 Avr 2016 - 21:34

    merci





    avatar
    Saphira
    FémininAge : 20Messages : 72

    le Mer 20 Avr 2016 - 14:47

    Merci :)
    avatar
    Asaëlle
    FémininAge : 24Messages : 124

    le Mer 4 Mai 2016 - 10:32

    Merci c'est bien pratique pour le coup !
    avatar
    Geekgirl
    FémininAge : 20Messages : 23

    le Mer 4 Mai 2016 - 23:31

    Merci




    Contenu sponsorisé


      La date/heure actuelle est Ven 21 Juil 2017 - 8:33