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 : 25Messages : 18555

    le Dim 24 Nov - 11: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 - 7:47, édité 3 fois



     
    avatar
    Raziel Dirty
    MasculinAge : 19Messages : 38

    le Sam 4 Oct - 10:19

    Merci beaucoup !
    avatar
    Storminder
    MasculinAge : 21Messages : 56

    le Dim 5 Oct - 19:02

    Merci à toi !
    avatar
    EverLiam
    FémininAge : 28Messages : 895

    le Sam 11 Oct - 19:42

    super





    avatar
    blade li britannia
    MasculinAge : 25Messages : 90

    le Dim 12 Oct - 18:48

    Merci d'avance
    avatar
    AlexeB
    FémininAge : 21Messages : 164

    le Lun 20 Oct - 10:20

    Merci du partage *o*
    avatar
    *-Atlas-*
    MasculinAge : 28Messages : 135

    le Ven 31 Oct - 18:05

    Merci



    avatar
    Celuna
    FémininAge : 26Messages : 121

    le Ven 31 Oct - 21:07

    Merci
    avatar
    Hiai
    MasculinAge : 26Messages : 30

    le Sam 1 Nov - 20:23

    Franchement, merci ! :)
    avatar
    Neverose
    FémininAge : 25Messages : 84

    le Sam 1 Nov - 20:36

    Merci <3



    avatar
    Pokebip
    MasculinAge : 19Messages : 69

    le Dim 2 Nov - 15:55

    coooool!
    avatar
    Fangs
    MasculinAge : 99Messages : 91

    le Mar 4 Nov - 21:05

    Dieu merci ! *^* tu me sauves la vie !!
    avatar
    Juniper
    FémininAge : 20Messages : 32

    le Ven 14 Nov - 18:08

    Merci ça va m'être utile :)



    avatar
    Malf Claymore
    FémininAge : 22Messages : 125

    le Dim 16 Nov - 19:40

    merci ^^
    avatar
    The One Pandemonium
    FémininAge : 23Messages : 97

    le Mar 18 Nov - 19:22

    Merci!



    « Une oeuvre d’art, c’est un monceau de cicatrices. »
    avatar
    Kimberlay *
    FémininAge : 27Messages : 158

    le Mer 19 Nov - 18:51

    Merci
    avatar
    Narachi
    MasculinAge : 23Messages : 71

    le Jeu 20 Nov - 3:29

    Merci



    avatar
    damon w salvatore
    FémininAge : 29Messages : 108

    le Dim 30 Nov - 1:02

    merci
    avatar
    Egyfu
    FémininAge : 23Messages : 45

    le Dim 30 Nov - 18:08

    Aahh enfin la solution à mon problème principal. Je te remercie grandement. J'vais voir comment tu as réglé ça !
    avatar
    Doctor Who
    MasculinAge : 23Messages : 160

    le Ven 5 Déc - 17:37

    Merci :)





    DOCTOR WHO ☼
    © Yamashita d'épicode
    avatar
    Sid'
    FémininAge : 27Messages : 67

    le Ven 5 Déc - 19:50

    Mici !
    avatar
    Nevr0z
    FémininAge : 28Messages : 74

    le Sam 6 Déc - 17:22

    Pratique ! Merci :)
    Catblack
    FémininAge : 21Messages : 85

    le Jeu 11 Déc - 14:11

    Nous avons ce problème chez nous merci du partage :hug:
    avatar
    0smose
    FémininAge : 21Messages : 156

    le Ven 12 Déc - 8:32

    Tu me sauves la vie ! Merci !! :'D





    But I'm only human
    And I bleed when I fall down... I'm only human and I crash and I break down. Your words in my head,
    knives in my heart. You build me up and then I fall apart.
    'Cause I'm only human.
    avatar
    Araik
    FémininAge : 21Messages : 247

    le Sam 13 Déc - 20:48

    Pratique



    avatar
    Kirito
    MasculinAge : 21Messages : 192

    le Sam 20 Déc - 12:03

    Merci =)
    Contenu sponsorisé


      La date/heure actuelle est Mar 25 Avr - 20:12