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


    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
    Lyogi
    MasculinAge : 18Messages : 23

    le Mar 26 Nov 2013 - 18:36

    Merci :)



    avatar
    skyfighter
    MasculinAge : 34Messages : 350

    le Mer 27 Nov 2013 - 1:59

    merci





    avatar
    MrTchikii
    MasculinAge : 25Messages : 27

    le Mer 27 Nov 2013 - 19:31

    Merci
    avatar
    Linksys
    MasculinAge : 19Messages : 17

    le Jeu 28 Nov 2013 - 1:00

    Mille MErci !
    avatar
    catbug
    FémininAge : 23Messages : 13

    le Ven 29 Nov 2013 - 23:21

    Merci c'est vraiment un tuto pratique :)
    avatar
    Meilia
    FémininAge : 23Messages : 92

    le Dim 1 Déc 2013 - 19:54

    Merci bien Very Happy
    avatar
    Satorax Necro
    MasculinAge : 20Messages : 16

    le Lun 2 Déc 2013 - 14:22

    Je veux savoir, oui, enfin je vais arrêter de me demandez si l'image à les bonnes dimensions pour tous le monde Very Happy
    avatar
    Vorn
    MasculinAge : 20Messages : 2342

    le Sam 8 Fév 2014 - 20:23

    Mercii



    avatar
    Azaral
    FémininAge : 21Messages : 69

    le Sam 1 Mar 2014 - 0:49

    merci
    avatar
    Bruleciel
    FémininAge : 24Messages : 934

    le Sam 1 Mar 2014 - 11:23

    Vraiment merci ! :)



    Je brûle le ciel
    avatar
    Vixinte
    FémininAge : 19Messages : 90

    le Mar 11 Mar 2014 - 14:00

      C'est ce que je cherchais depuis longtemps ! Merci beaucoup !
    avatar
    ShamRock
    FémininAge : 23Messages : 33

    le Mar 11 Mar 2014 - 16:31

    Merci ~
    avatar
    Shiney
    FémininAge : 19Messages : 26

    le Mar 11 Mar 2014 - 17:33

    Très utile, merci !
    avatar
    Presley♥Cash
    FémininAge : 26Messages : 73

    le Mer 12 Mar 2014 - 22:26

    Merci :)
    Lyly
    FémininAge : 25Messages : 18

    le Mer 19 Mar 2014 - 18:37

    Merci beaucoup pour l'astuce ^^
    avatar
    Sakira
    FémininAge : 24Messages : 89

    le Jeu 20 Mar 2014 - 20:38

    merci =3



    Bientôt peut être o/
    Dépendra de ma motiv'
    avatar
    Alonely
    MasculinAge : 22Messages : 43

    le Sam 22 Mar 2014 - 2:47

    Merci
    avatar
    Likau
    MasculinAge : 23Messages : 324

    le Mer 26 Mar 2014 - 21:48

    Ça m'intéresse :o
    Merci pour le tuto ^^
    avatar
    shala
    FémininAge : 25Messages : 213

    le Dim 30 Mar 2014 - 23:46

    merci



    avatar
    Haruna
    FémininAge : 20Messages : 12

    le Mar 1 Avr 2014 - 19:30

    Ca va m'être utile, ça ! Merci ! Very Happy
    avatar
    Mistiie
    FémininAge : 18Messages : 74

    le Mer 9 Avr 2014 - 17:00

    merci !
    Twedle
    MasculinAge : 21Messages : 17

    le Jeu 10 Avr 2014 - 14:53

    Merci !
    avatar
    Malice1329
    FémininAge : 29Messages : 79

    le Ven 11 Avr 2014 - 16:15

    Merci beaucoup



    avatar
    tenderness
    FémininAge : 23Messages : 54

    le Mer 16 Avr 2014 - 22:41

    Merci ♥
    Contenu sponsorisé


      La date/heure actuelle est Mer 16 Aoû 2017 - 19:28