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
    Xenala
    FémininAge : 34Messages : 28

    le Dim 28 Déc 2014 - 1:42

    Merci
    avatar
    Miyoko
    FémininAge : 25Messages : 213

    le Dim 28 Déc 2014 - 13:58

    merci



    Blue
    MasculinAge : 20Messages : 36

    le Mer 14 Jan 2015 - 14:34

    Merci ^^
    avatar
    Aki'
    FémininAge : 21Messages : 254

    le Mer 14 Jan 2015 - 19:15

    Merci
    avatar
    Callisto
    FémininAge : 20Messages : 43

    le Dim 18 Jan 2015 - 19:30

    Merci pour l'astuce !
    avatar
    Hana Evali
    FémininAge : 27Messages : 164

    le Mar 10 Fév 2015 - 17:16

    Han super ! Merci !



    avatar
    Nat
    FémininAge : 23Messages : 42

    le Mar 10 Fév 2015 - 20:37

    Très bonne astuce, merci ! :popcorn:
    avatar
    Nero Brigh
    MasculinAge : 33Messages : 85

    le Ven 13 Fév 2015 - 0:22

    Merci !
    avatar
    Mattyew
    MasculinAge : 23Messages : 63

    le Dim 15 Fév 2015 - 22:51

    Ah génial cela peut-être sacrement pratique ! Mercii !
    avatar
    Psychotic Bitch
    FémininAge : 31Messages : 38

    le Mar 17 Fév 2015 - 19:26

    merci
    avatar
    Mini BN
    FémininAge : 22Messages : 33

    le Jeu 19 Fév 2015 - 20:26

    Merci beaucoup ça m'a sauvé la vie ! =3
    avatar
    Melik
    MasculinAge : 24Messages : 74

    le Mer 4 Mar 2015 - 13:06

    Merci
    Nardco
    MasculinAge : 56Messages : 51

    le Jeu 5 Mar 2015 - 23:54

    Graciac
    avatar
    Milou
    FémininAge : 18Messages : 163

    le Dim 8 Mar 2015 - 20:33

    Merci !



    avatar
    Irissia87
    FémininAge : 30Messages : 124

    le Mer 18 Mar 2015 - 10:44

    merci
    avatar
    Luna_Rakuen
    FémininAge : 25Messages : 79

    le Mer 18 Mar 2015 - 23:55

    Merci <3
    avatar
    Phoenix Elen
    FémininAge : 25Messages : 93

    le Lun 23 Mar 2015 - 15:50

    Merci beaucoup !

    C'est quelque chose que je recherchais depuis un moment (enfin depuis deux jours au moment où on m'a signalé ce problème de fond) !



    avatar
    Popcorn
    MasculinAge : 27Messages : 41

    le Mar 24 Mar 2015 - 10:34

    Merci bien =D
    avatar
    JEG Elo
    FémininAge : 26Messages : 42

    le Ven 27 Mar 2015 - 2:42

    Merci **
    avatar
    MsCrazy.E
    FémininAge : 20Messages : 183

    le Ven 27 Mar 2015 - 23:19

    merci pour cette aide ! ^^



    avatar
    Hayate kimitsu
    MasculinAge : 24Messages : 29

    le Lun 30 Mar 2015 - 18:14

    Merci x)
    avatar
    Kiwy Cat
    FémininAge : 25Messages : 19

    le Mer 1 Avr 2015 - 17:52

    Ca réglera peut-être mon souci actuel, merci !
    avatar
    Kathee
    FémininAge : 24Messages : 664

    le Ven 3 Avr 2015 - 23:23

    Merci beaucoup ! Ce sera plus confortable pour tous les membres comme ça =)





    Nous serions ravis de vous accueillir - Venez donc voir ce petit petit fofo
    avatar
    AnimeFanGirl199
    FémininAge : 19Messages : 13

    le Dim 12 Avr 2015 - 22:02

    Merci! :)
    avatar
    Tria
    FémininAge : 20Messages : 125

    le Mer 15 Avr 2015 - 18:21

    Merci !



    "Tomber est permis, se relever est ordonné."
    Contenu sponsorisé


      La date/heure actuelle est Mer 20 Sep 2017 - 5:52