AccueilRechercherS'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 : -50%
JBL Xtreme 2 – Enceinte Bluetooth portable
Voir le deal
149.99 €

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

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



     
    Kearhoor
    Kearhoor
    FémininAge : 25Messages : 10

    Sam 21 Juin 2014 - 15:45

    Merci, heureusement qu'il existe de bonnes âmes ~.



    Image de fond s'adaptant à toutes les résolutions - Page 3 120723023743244487
    Heavensky
    Heavensky
    FémininAge : 26Messages : 66

    Lun 23 Juin 2014 - 22:46

    Merci !
    Carmina
    Carmina
    FémininAge : 35Messages : 453

    Mar 24 Juin 2014 - 8:43

    merci
    Deadpoolio
    Deadpoolio
    MasculinAge : 31Messages : 277

    Dim 29 Juin 2014 - 15:31

    ça m'intéresse bien, merci :)
    Faylinn
    Faylinn
    FémininAge : 31Messages : 17

    Lun 30 Juin 2014 - 12:17

    Merci  Wink 
    Asuka
    Asuka
    FémininAge : 27Messages : 105

    Sam 12 Juil 2014 - 13:38

    Merci !



    Image de fond s'adaptant à toutes les résolutions - Page 3 975531MisakiHino3
    Himmie
    Himmie
    MasculinAge : 24Messages : 128

    Dim 13 Juil 2014 - 13:16

    Merci
    shala
    shala
    FémininAge : 29Messages : 213

    Jeu 24 Juil 2014 - 19:26

    merci ^^



    Arfgang
    Arfgang
    MasculinAge : 30Messages : 63

    Sam 26 Juil 2014 - 15:44

    Merci



    Image de fond s'adaptant à toutes les résolutions - Page 3 Arfgan10
    avatar
    Chipman
    MasculinAge : 27Messages : 18

    Mar 29 Juil 2014 - 12:19

    Merci !
    Le Dévoreur de temps
    Le Dévoreur de temps
    MasculinAge : 41Messages : 92

    Jeu 31 Juil 2014 - 1:30

    merci beaucoup
    Mr Yo
    Mr Yo
    MasculinAge : 46Messages : 37

    Dim 3 Aoû 2014 - 14:35

    Ca, c’est genial
    Delfixyon
    Delfixyon
    MasculinAge : 25Messages : 26

    Dim 3 Aoû 2014 - 18:30

    Exactement ce que je cherchais ! Merci. =)
    Percylove
    Percylove
    FémininAge : 26Messages : 259

    Lun 4 Aoû 2014 - 5:29

    merci



    Image de fond s'adaptant à toutes les résolutions - Page 3 9a6v
    avatar
    Drogba JR
    MasculinAge : 29Messages : 88

    Mer 6 Aoû 2014 - 21:28

    merci
    shala
    shala
    FémininAge : 29Messages : 213

    Mar 12 Aoû 2014 - 19:04

    merci



    Mushu
    Mushu
    FémininAge : 23Messages : 68

    Jeu 14 Aoû 2014 - 11:15

    Merci beaucoup !
    Aepique
    Aepique
    FémininAge : 29Messages : 14

    Ven 15 Aoû 2014 - 20:46

    merci



    Image de fond s'adaptant à toutes les résolutions - Page 3 937136signature
    Plume'
    Plume'
    FémininAge : 23Messages : 166

    Jeu 21 Aoû 2014 - 23:15

    Merci !
    Saphire
    Saphire
    FémininAge : 23Messages : 146

    Lun 25 Aoû 2014 - 15:32

    merci
    Tyra'
    Tyra'
    MasculinAge : 26Messages : 87

    Sam 30 Aoû 2014 - 23:44

    Merci



    Image de fond s'adaptant à toutes les résolutions - Page 3 Sans_t11
    The_Scream
    The_Scream
    FémininAge : 27Messages : 43

    Mer 3 Sep 2014 - 17:42

    Merci !



    ~That's the hell said no ~

    Image de fond s'adaptant à toutes les résolutions - Page 3 Dragoncopie
    Lissandra
    Lissandra
    FémininAge : 23Messages : 7

    Ven 19 Sep 2014 - 20:04

    Thank you
    Nawak
    Nawak
    FémininAge : 23Messages : 112

    Mer 1 Oct 2014 - 4:17

    Merci, ça va être très utile ! Very Happy



    Image de fond s'adaptant à toutes les résolutions - Page 3 Umbrel10
    Arabesque Jo
    Arabesque Jo
    FémininAge : 72Messages : 697

    Mer 1 Oct 2014 - 9:05

    Merci , je vais regarder ça!
    Contenu sponsorisé


      La date/heure actuelle est Mer 4 Aoû 2021 - 14:45