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 :
Boutique Nike : -25% dès 50€ sur TOUT le ...
Voir le deal

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

    Neva
    Neva
    FémininAge : 33Messages : 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



     
    Sheo
    Sheo
    FémininAge : 33Messages : 26

    Sam 22 Aoû 2015 - 19:13

    merci beaucoup Wink
    Junichi Kudo
    Junichi Kudo
    MasculinAge : 28Messages : 80

    Dim 23 Aoû 2015 - 23:19

    thanks
    Wawi
    Wawi
    MasculinAge : 33Messages : 10

    Ven 28 Aoû 2015 - 16:15

    Merci:)
    MissDream
    MissDream
    FémininAge : 29Messages : 151

    Dim 30 Aoû 2015 - 15:47

    Merci beaucoup du partage :)



    MissDream
    N'ais pas peur de rêver

    Recommandation
    Myosotis
    Myosotis
    FémininAge : 24Messages : 101

    Lun 31 Aoû 2015 - 13:53

    Merci
    ROGERS.
    ROGERS.
    FémininAge : 29Messages : 335

    Ven 11 Sep 2015 - 0:16

    Merci beaucoup
    CookiesAuxChoco
    CookiesAuxChoco
    FémininAge : 29Messages : 23

    Ven 11 Sep 2015 - 21:01

    Ca va m'aider, merci beaucoup ! Very Happy
    Isaac Berntsson
    Isaac Berntsson
    MasculinAge : 31Messages : 29

    Jeu 17 Sep 2015 - 9:52

    Merci !
    Dragonia
    Dragonia
    FémininAge : 35Messages : 24

    Ven 2 Oct 2015 - 4:21

    Merci ^^
    Kimberlay *
    Kimberlay *
    FémininAge : 34Messages : 161

    Sam 3 Oct 2015 - 17:55

    Merci !
    Kobye
    Kobye
    FémininAge : 28Messages : 38

    Mar 6 Oct 2015 - 3:23

    Mercii!! Very Happy
    RainboWolf
    RainboWolf
    FémininAge : 27Messages : 102

    Mer 7 Oct 2015 - 15:54

    Merci !!
    Lessien
    Lessien
    FémininAge : 42Messages : 163

    Ven 16 Oct 2015 - 19:28

    Merci :)
    Sighild
    Sighild
    FémininAge : 37Messages : 225

    Ven 16 Oct 2015 - 19:36

    Merci pour ce tuto, j'ai souvent ce soucis.
    Nodox
    Nodox
    MasculinAge : 34Messages : 151

    Dim 18 Oct 2015 - 14:46

    Merci :)
    BlackWitch
    BlackWitch
    FémininAge : 36Messages : 9

    Dim 18 Oct 2015 - 15:53

    Super depuis le temps que je galère. 10 000 Merci
    Gouttou †
    Gouttou †
    FémininAge : 26Messages : 50

    Jeu 22 Oct 2015 - 1:42

    Merci ! :3



    Image de fond s'adaptant à toutes les résolutions - Page 7 365666rrrrr
    BlueBerry ♪
    BlueBerry ♪
    FémininAge : 27Messages : 138

    Ven 23 Oct 2015 - 16:08

    merci !



    Image de fond s'adaptant à toutes les résolutions - Page 7 7310
    Elocha
    Elocha
    FémininAge : 74Messages : 255

    Ven 23 Oct 2015 - 22:47

    merci !



    eLoChA.
    Anonymous
    Invité

    Jeu 5 Nov 2015 - 19:16

    Hello,

    Merci.
    Nectarinne
    Nectarinne
    FémininAge : 30Messages : 28

    Sam 7 Nov 2015 - 10:56

    Merci ♥
    zbou
    zbou
    FémininAge : 30Messages : 83

    Jeu 12 Nov 2015 - 9:59

    Merci beaucoup !
    Anonymous
    Invité

    Lun 23 Nov 2015 - 12:06

    merci! =)
    Tanchi
    Tanchi
    Age : 33Messages : 373

    Mer 16 Déc 2015 - 23:41

    Merci du partage x)



    Image de fond s'adaptant à toutes les résolutions - Page 7 335854plop
    Madness of Wonderland
    Madness of Wonderland
    FémininAge : 24Messages : 60

    Dim 20 Déc 2015 - 18:05

    merci
    Contenu sponsorisé


      La date/heure actuelle est Lun 2 Déc 2024 - 8:36