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 à ne pas rater :
L’ORÉAL PARIS Men Expert – Lot Gel douche + Déodorant spray + ...
8 €
Voir le deal

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

    Neva
    Neva
    FémininAge : 29Messages : 18565

    le 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



     
    witm
    witm
    FémininAge : 26Messages : 51

    le Mar 27 Sep 2016 - 11:09

    merci :)
    yukiyuki
    yukiyuki
    FémininAge : 26Messages : 89

    le Mer 5 Oct 2016 - 17:18

    MErci !
    P'tit loup
    P'tit loup
    MasculinAge : 38Messages : 449

    le Jeu 6 Oct 2016 - 17:35

    ça va me servir, j'ai justement un soucis de cet ordre pour l'un des membres de mon forum. Merci du partage ^^



    Image de fond s'adaptant à toutes les résolutions - Page 10 30xivrd
    Noubil
    Noubil
    FémininAge : 32Messages : 59

    le Lun 17 Oct 2016 - 18:13

    Merci :love:
    Skriff
    Skriff
    MasculinAge : 30Messages : 21

    le Mer 19 Oct 2016 - 15:35

    Ça promet d'être très utile, je dois l'avouer ! Je veux bien voir les explications, merci du temps accordé ! =)
    dean winchester
    dean winchester
    MasculinAge : 26Messages : 85

    le Sam 22 Oct 2016 - 0:21

    merci
    Dariel
    Dariel
    FémininAge : 50Messages : 69

    le Mar 8 Nov 2016 - 22:05

    cheers  Neva, merci de partager...

    :titanic:



    C'est la vie Invité ! Pas le paradis.
    Risa
    Risa
    FémininAge : 32Messages : 255

    le Dim 4 Déc 2016 - 9:04

    Merci !
    Lyxiae
    Lyxiae
    FémininAge : 27Messages : 44

    le Dim 11 Déc 2016 - 23:43

    Merci !
    Ozsi
    Ozsi
    MasculinAge : 23Messages : 27

    le Lun 12 Déc 2016 - 19:34

    Merci :)
    Irony
    Irony
    FémininAge : 23Messages : 102

    le Mar 31 Jan 2017 - 14:47

    Merci !
    OptimaluS
    OptimaluS
    MasculinAge : 36Messages : 6

    le Mar 31 Jan 2017 - 16:09

    Merci pour cette astuce tant recherché :)
    Anonymous
    Invité

    le Sam 18 Fév 2017 - 4:01

    Merci!
    1charlotte
    1charlotte
    FémininAge : 19Messages : 196

    le Sam 4 Mar 2017 - 21:05

    Très pratique **
    Vixol
    Vixol
    MasculinAge : 25Messages : 13

    le Dim 5 Mar 2017 - 20:26

    Merci bien, ca m'a l'air super utile
    Mashi Hozuki
    Mashi Hozuki
    MasculinAge : 23Messages : 28

    le Mer 8 Mar 2017 - 17:06

    merci
    Voxiom
    Voxiom
    MasculinAge : 20Messages : 10

    le Jeu 9 Mar 2017 - 23:25

    Merci
    Heroyn'
    Heroyn'
    FémininAge : 24Messages : 53

    le Lun 27 Mar 2017 - 21:08

      Merci !
    Loralei
    Loralei
    FémininAge : 29Messages : 7

    le Lun 22 Mai 2017 - 22:54

    Merci beaucoup :)
    TheDarkOne
    TheDarkOne
    FémininAge : 30Messages : 24

    le Dim 19 Aoû 2018 - 18:33

    Purée je cherchais désespérément comment le faire alors que c'est vraiment tout bête !! Je te remercie Very Happy
    Ookami Shiroi
    Ookami Shiroi
    FémininAge : 28Messages : 90

    le Mar 28 Avr 2020 - 18:22

    Merci pour cette astuce Very Happy
    Lone wanderer
    Lone wanderer
    MasculinAge : 28Messages : 168

    le Mar 17 Nov 2020 - 11:34

    Super ! merci Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Mar 24 Nov 2020 - 1:35