AccueilDernières imagesRechercherS'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.

Le Deal du moment :
Google Pixel 7 5G – Smartphone 6,3″ OLED ...
Voir le deal
316 €

    Image de fond s'adaptant à toutes les résolutions

    Neva
    Neva
    FémininAge : 32Messages : 18565

    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



     
    Raziel Dirty
    Raziel Dirty
    MasculinAge : 26Messages : 39

    Sam 4 Oct 2014 - 12:19

    Merci beaucoup !
    Storminder
    Storminder
    MasculinAge : 27Messages : 56

    Dim 5 Oct 2014 - 21:02

    Merci à toi !
    EverLiam
    EverLiam
    FémininAge : 35Messages : 1082

    Sam 11 Oct 2014 - 21:42

    super



    blade li britannia
    blade li britannia
    MasculinAge : 31Messages : 90

    Dim 12 Oct 2014 - 20:48

    Merci d'avance
    AlexeB
    AlexeB
    FémininAge : 28Messages : 165

    Lun 20 Oct 2014 - 12:20

    Merci du partage *o*
    *-Atlas-*
    *-Atlas-*
    MasculinAge : 35Messages : 138

    Ven 31 Oct 2014 - 19:05

    Merci



    Image de fond s'adaptant à toutes les résolutions - Page 4 539522Atlasnewban
    Celuna
    Celuna
    FémininAge : 33Messages : 133

    Ven 31 Oct 2014 - 22:07

    Merci
    Hiai
    Hiai
    MasculinAge : 33Messages : 31

    Sam 1 Nov 2014 - 21:23

    Franchement, merci ! :)
    Neverose
    Neverose
    FémininAge : 32Messages : 93

    Sam 1 Nov 2014 - 21:36

    Merci <3



    Image de fond s'adaptant à toutes les résolutions - Page 4 E9SQItc
    Pokebip
    Pokebip
    MasculinAge : 26Messages : 69

    Dim 2 Nov 2014 - 16:55

    coooool!
    Fangs
    Fangs
    MasculinAge : 106Messages : 91

    Mar 4 Nov 2014 - 22:05

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

    Ven 14 Nov 2014 - 19:08

    Merci ça va m'être utile :)



    Image de fond s'adaptant à toutes les résolutions - Page 4 928788KitSignatureTomoeflower
    Malf Claymore
    Malf Claymore
    FémininAge : 29Messages : 126

    Dim 16 Nov 2014 - 20:40

    merci ^^
    The One Pandemonium
    The One Pandemonium
    FémininAge : 30Messages : 97

    Mar 18 Nov 2014 - 20:22

    Merci!



    « Une oeuvre d’art, c’est un monceau de cicatrices. »
    Image de fond s'adaptant à toutes les résolutions - Page 4 1416253868-ladycrowcoupe
    Kimberlay *
    Kimberlay *
    FémininAge : 33Messages : 161

    Mer 19 Nov 2014 - 19:51

    Merci
    Narachi
    Narachi
    MasculinAge : 30Messages : 77

    Jeu 20 Nov 2014 - 4:29

    Merci



    Image de fond s'adaptant à toutes les résolutions - Page 4 Natsu_11
    damon w salvatore
    damon w salvatore
    FémininAge : 36Messages : 109

    Dim 30 Nov 2014 - 2:02

    merci
    Egyfu
    Egyfu
    FémininAge : 30Messages : 56

    Dim 30 Nov 2014 - 19:08

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

    Ven 5 Déc 2014 - 18:37

    Merci :)





    DOCTOR WHO ☼
    ©️ Yamashita d'épicode
    Sid'
    Sid'
    MasculinAge : 33Messages : 73

    Ven 5 Déc 2014 - 20:50

    Mici !
    Nevr0z
    Nevr0z
    FémininAge : 35Messages : 74

    Sam 6 Déc 2014 - 18:22

    Pratique ! Merci :)
    avatar
    Catblack
    FémininAge : 28Messages : 85

    Jeu 11 Déc 2014 - 15:11

    Nous avons ce problème chez nous merci du partage :hug:
    0smose
    0smose
    FémininAge : 28Messages : 167

    Ven 12 Déc 2014 - 9:32

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



    Image de fond s'adaptant à toutes les résolutions - Page 4 Bannie10

    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.
    Araik
    Araik
    FémininAge : 28Messages : 250

    Sam 13 Déc 2014 - 21:48

    Pratique



    Image de fond s'adaptant à toutes les résolutions - Page 4 Signat15
    Kirito
    Kirito
    MasculinAge : 28Messages : 209

    Sam 20 Déc 2014 - 13:03

    Merci =)
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 9:39