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.

-34%
Le deal à ne pas rater :
-34% LG OLED55B3 – TV OLED 4K 55″ 2023 – 100Hz HDR 10+, ...
919 € 1399 €
Voir le deal

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

    Neva
    Neva
    FémininAge : 32Messages : 18565

    Dim 24 Nov 2013 - 12:19


    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



     
    Lyogi
    Lyogi
    MasculinAge : 25Messages : 28

    Mar 26 Nov 2013 - 18:36

    Merci :)



    Image de fond s'adaptant à toutes les résolutions GDcueV2HCiw_grandsign
    skyfighter
    skyfighter
    MasculinAge : 41Messages : 352

    Mer 27 Nov 2013 - 1:59

    merci




    Image de fond s'adaptant à toutes les résolutions Signat10
    MrTchikii
    MrTchikii
    MasculinAge : 31Messages : 27

    Mer 27 Nov 2013 - 19:31

    Merci
    Linksys
    Linksys
    MasculinAge : 25Messages : 17

    Jeu 28 Nov 2013 - 1:00

    Mille MErci !
    catbug
    catbug
    FémininAge : 29Messages : 13

    Ven 29 Nov 2013 - 23:21

    Merci c'est vraiment un tuto pratique :)
    Meilia
    Meilia
    FémininAge : 29Messages : 92

    Dim 1 Déc 2013 - 19:54

    Merci bien Very Happy
    Satorax Necro
    Satorax Necro
    MasculinAge : 27Messages : 20

    Lun 2 Déc 2013 - 14:22

    Je veux savoir, oui, enfin je vais arrêter de me demandez si l'image à les bonnes dimensions pour tous le monde Very Happy
    Vorn
    Vorn
    MasculinAge : 27Messages : 2342

    Sam 8 Fév 2014 - 20:23

    Mercii



    Image de fond s'adaptant à toutes les résolutions JGBUOP6
    Azaral
    Azaral
    FémininAge : 27Messages : 69

    Sam 1 Mar 2014 - 0:49

    merci
    Bruleciel
    Bruleciel
    FémininAge : 31Messages : 934

    Sam 1 Mar 2014 - 11:23

    Vraiment merci ! :)



    Image de fond s'adaptant à toutes les résolutions Disney10 Image de fond s'adaptant à toutes les résolutions 710aa410
    Je brûle le ciel
    Vixinte
    Vixinte
    FémininAge : 26Messages : 90

    Mar 11 Mar 2014 - 14:00

      C'est ce que je cherchais depuis longtemps ! Merci beaucoup !
    ShamRock
    ShamRock
    FémininAge : 29Messages : 44

    Mar 11 Mar 2014 - 16:31

    Merci ~
    Shiney
    Shiney
    FémininAge : 26Messages : 26

    Mar 11 Mar 2014 - 17:33

    Très utile, merci !
    Presley♥Cash
    Presley♥Cash
    FémininAge : 32Messages : 80

    Mer 12 Mar 2014 - 22:26

    Merci :)
    avatar
    Lyly
    FémininAge : 32Messages : 18

    Mer 19 Mar 2014 - 18:37

    Merci beaucoup pour l'astuce ^^
    Sakira
    Sakira
    FémininAge : 31Messages : 89

    Jeu 20 Mar 2014 - 20:38

    merci =3



    Bientôt peut être o/
    Dépendra de ma motiv'
    Alonely
    Alonely
    MasculinAge : 29Messages : 43

    Sam 22 Mar 2014 - 2:47

    Merci
    Likau
    Likau
    MasculinAge : 29Messages : 353

    Mer 26 Mar 2014 - 21:48

    Ça m'intéresse :o
    Merci pour le tuto ^^
    shala
    shala
    FémininAge : 32Messages : 213

    Dim 30 Mar 2014 - 23:46

    merci



    Haruna
    Haruna
    FémininAge : 26Messages : 12

    Mar 1 Avr 2014 - 19:30

    Ca va m'être utile, ça ! Merci ! Very Happy
    Mistiie
    Mistiie
    FémininAge : 25Messages : 74

    Mer 9 Avr 2014 - 17:00

    merci !
    avatar
    Twedle
    MasculinAge : 28Messages : 19

    Jeu 10 Avr 2014 - 14:53

    Merci !
    Malice1329
    Malice1329
    FémininAge : 35Messages : 81

    Ven 11 Avr 2014 - 16:15

    Merci beaucoup



    ❝ Every Love Story is Beautiful ❞
    Baby, I'm dancing in the dark with you between my arms, Barefoot on the grass, listening to our favorite song,When you said you looked a mess, I whispered underneath my breath But you heard it, darling, you look perfect tonight× BY LIZZOU
    tenderness
    tenderness
    FémininAge : 30Messages : 54

    Mer 16 Avr 2014 - 22:41

    Merci ♥
    Contenu sponsorisé


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