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 - 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



     
    Xenala
    Xenala
    FémininAge : 36Messages : 28

    le Dim 28 Déc 2014 - 1:42

    Merci
    Miyoko
    Miyoko
    FémininAge : 26Messages : 213

    le Dim 28 Déc 2014 - 13:58

    merci



    Image de fond s'adaptant à toutes les résolutions - Page 5 641359838739
    avatar
    Blue
    MasculinAge : 21Messages : 36

    le Mer 14 Jan 2015 - 14:34

    Merci ^^
    Aki'
    Aki'
    FémininAge : 22Messages : 255

    le Mer 14 Jan 2015 - 19:15

    Merci
    Callisto
    Callisto
    FémininAge : 22Messages : 44

    le Dim 18 Jan 2015 - 19:30

    Merci pour l'astuce !
    Hana Evali
    Hana Evali
    FémininAge : 28Messages : 179

    le Mar 10 Fév 2015 - 17:16

    Han super ! Merci !





    Je joue
    • ♚ Kili
    • ♚Ianto Jones
    • ♚ Thor Odinson
    • ♚ James T. Kirk
    J'anime
    • ♚ Les intrigues
    • ♚ Les soirées CB
    • ♚ Les événements
    • ♚ Le flood/les jeux


    Nat
    Nat
    FémininAge : 24Messages : 42

    le Mar 10 Fév 2015 - 20:37

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

    le Ven 13 Fév 2015 - 0:22

    Merci !
    Mattyew
    Mattyew
    MasculinAge : 25Messages : 90

    le Dim 15 Fév 2015 - 22:51

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

    le Mar 17 Fév 2015 - 19:26

    merci
    Mini BN
    Mini BN
    FémininAge : 23Messages : 42

    le Jeu 19 Fév 2015 - 20:26

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

    le Mer 4 Mar 2015 - 13:06

    Merci
    avatar
    Nardco
    MasculinAge : 58Messages : 82

    le Jeu 5 Mar 2015 - 23:54

    Graciac
    Milou
    Milou
    FémininAge : 20Messages : 163

    le Dim 8 Mar 2015 - 20:33

    Merci !



    Image de fond s'adaptant à toutes les résolutions - Page 5 693002signa
    Irissia87
    Irissia87
    FémininAge : 31Messages : 124

    le Mer 18 Mar 2015 - 10:44

    merci
    Luna_Rakuen
    Luna_Rakuen
    FémininAge : 26Messages : 79

    le Mer 18 Mar 2015 - 23:55

    Merci <3
    Phoenix Elen
    Phoenix Elen
    FémininAge : 26Messages : 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) !



    Image de fond s'adaptant à toutes les résolutions - Page 5 1u4i
    Popcorn
    Popcorn
    MasculinAge : 29Messages : 41

    le Mar 24 Mar 2015 - 10:34

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

    le Ven 27 Mar 2015 - 2:42

    Merci **
    MsCrazy.E
    MsCrazy.E
    FémininAge : 21Messages : 183

    le Ven 27 Mar 2015 - 23:19

    merci pour cette aide ! ^^



    Image de fond s'adaptant à toutes les résolutions - Page 5 Nu_a_b10
    Hayate kimitsu
    Hayate kimitsu
    MasculinAge : 25Messages : 30

    le Lun 30 Mar 2015 - 18:14

    Merci x)
    Kiwy Cat
    Kiwy Cat
    FémininAge : 26Messages : 19

    le Mer 1 Avr 2015 - 17:52

    Ca réglera peut-être mon souci actuel, merci !
    Kathee
    Kathee
    FémininAge : 25Messages : 667

    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 •

    Image de fond s'adaptant à toutes les résolutions - Page 5 Signae10
    • Venez donc voir ce petit petit fofo •
    AnimeFanGirl199
    AnimeFanGirl199
    FémininAge : 21Messages : 13

    le Dim 12 Avr 2015 - 22:02

    Merci! :)
    Tria
    Tria
    FémininAge : 22Messages : 125

    le Mer 15 Avr 2015 - 18:21

    Merci !



    "Tomber est permis, se relever est ordonné."
    Image de fond s'adaptant à toutes les résolutions - Page 5 Hv62
    Contenu sponsorisé


      La date/heure actuelle est Ven 19 Avr 2019 - 2:20