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 : -33%
Elgato Stream Deck – Contrôleur de ...
Voir le deal
99.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



     
    Knobul
    Knobul
    MasculinAge : 23Messages : 30

    Mer 11 Mai 2016 - 10:56

    Merci
    Yukihyo
    Yukihyo
    MasculinAge : 24Messages : 98

    Sam 14 Mai 2016 - 15:26

    Merci !
    James K. Lindley
    James K. Lindley
    MasculinAge : 30Messages : 46

    Mar 17 Mai 2016 - 0:51

    Merci du partage !
    Argimpasa
    Argimpasa
    FémininAge : 30Messages : 96

    Sam 21 Mai 2016 - 17:13

    Merci Very Happy
    Mme Layton
    Mme Layton
    FémininAge : 24Messages : 93

    Lun 23 Mai 2016 - 15:33

    Merci =)
    M.O
    M.O
    MasculinAge : 31Messages : 51

    Mar 24 Mai 2016 - 4:05

    Merci!
    Aidden
    Aidden
    MasculinAge : 27Messages : 45

    Dim 29 Mai 2016 - 4:08

    Ah ! Un tuto bien utile !
    Anonymous
    Invité

    Dim 29 Mai 2016 - 9:12

    Merci !
    TenebreuseRP
    TenebreuseRP
    FémininAge : 22Messages : 248

    Jeu 9 Juin 2016 - 17:01

    super, merci beaucoup!



    Spoiler:
    Image de fond s'adaptant à toutes les résolutions - Page 9 1469119422-autre-lien-fofo

    Image de fond s'adaptant à toutes les résolutions - Page 9 1469119071-signature
    Zorane
    Zorane
    MasculinAge : 30Messages : 67

    Jeu 16 Juin 2016 - 11:39

    merci
    Nausicäa Kaer
    Nausicäa Kaer
    FémininAge : 27Messages : 162

    Sam 18 Juin 2016 - 12:11

    Merci!
    Chhaya
    Chhaya
    FémininAge : 36Messages : 1213

    Mar 21 Juin 2016 - 9:44

    Merci ♥



    Image de fond s'adaptant à toutes les résolutions - Page 9 200412081714641513

      Merci Sparrow :3
    Anonymous
    Invité

    Jeu 23 Juin 2016 - 6:11

    Merci ça va être utile :)
    Mustique
    Mustique
    FémininAge : 26Messages : 10

    Ven 24 Juin 2016 - 14:10

    Merci !
    Okalem
    Okalem
    FémininAge : 21Messages : 63

    Ven 24 Juin 2016 - 18:23

    mrcii
    Velvet-Mist
    Velvet-Mist
    FémininAge : 30Messages : 45

    Sam 25 Juin 2016 - 22:21

    Un grand merci pour ce tuto =)
    Tamashia
    Tamashia
    FémininAge : 20Messages : 45

    Mar 5 Juil 2016 - 20:27

    Thanks ♥



    Image de fond s'adaptant à toutes les résolutions - Page 9 611842EssayeSignature
    Aoi Kiseki
    Aoi Kiseki
    FémininAge : 29Messages : 105

    Dim 17 Juil 2016 - 20:40

    Merci
    .Lucifer.
    .Lucifer.
    MasculinAge : 48Messages : 183

    Jeu 11 Aoû 2016 - 11:41

    Merci beaucoup! Wink



    Image de fond s'adaptant à toutes les résolutions - Page 9 978358Divine
    Naiyarth
    Naiyarth
    MasculinAge : 22Messages : 9

    Lun 22 Aoû 2016 - 15:37

    Merci !!
    KimmyKinder
    KimmyKinder
    FémininAge : 20Messages : 181

    Ven 26 Aoû 2016 - 9:57

    Merci ^^
    LOUVE ☽
    LOUVE ☽
    FémininAge : 31Messages : 53

    Dim 28 Aoû 2016 - 12:34

    Merci
    NanoiHime
    NanoiHime
    FémininAge : 23Messages : 566

    Dim 4 Sep 2016 - 17:25

    mercii



    Shivichou
    Shivichou
    FémininAge : 26Messages : 23

    Mar 6 Sep 2016 - 16:04

    Merci beaucoup !!! ^^
    Inamio
    Inamio
    FémininAge : 29Messages : 252

    Sam 10 Sep 2016 - 21:28

    Merci Wink



    Image de fond s'adaptant à toutes les résolutions - Page 9 2014_p10
    Contenu sponsorisé


      La date/heure actuelle est Dim 28 Nov 2021 - 22:01