Image d'arrière-plan

De Gamepedia Help Wiki
Aller à : navigation, rechercher

L'image d'arrière-plan principale d'un wiki devrait être mise à l'échelle quelle que soit la taille de l'écran de l'utilisateur. Cela dit, que faites-vous si votre propre écran ou carte graphique n'est pas génial ? Voici quelques conseils :

Si vous utilisez Firefox comme navigateur, vous pouvez utiliser la touche Ctrl avec la touche - pour réduire l'image sur votre écran, à plusieurs reprises si nécessaire. Cela vous donnera une très bonne idée de si votre choix de CSS pour l'image d'arrière-plan évolue réellement, ou s'il en résulte une image qui est brusquement coupée pour les utilisateurs qui ont de meilleurs écrans ou une meilleure résolution (Ctrl + 0 la réinitialise).

Conseils CSS[modifier | modifier le wikicode]

Valeur cover[modifier | modifier le wikicode]

body {
    background: #000000 url(http://hydra-media.cursecdn.com/killingfloor2.gamepedia.com/9/98/Bg.jpg) no-repeat fixed center top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Mise à l'échelle en largeur[modifier | modifier le wikicode]

Si votre image d'arrière-plan passe bien au transparent ou à la couleur d'arrière-plan par défaut, vous pouvez simplement la mettre à l'échelle au niveau de la largeur (ou de la hauteur).

body {
    background: #000000 url(http://hydra-media.cursecdn.com/witcher.gamepedia.com/3/33/Tw3_wiki_bg.jpg) no-repeat fixed center top / 100% auto;
}

Circonstances exceptionnelles[modifier | modifier le wikicode]

Si, pour une raison insondable, votre image d'arrière-plan ne peut pas être mise à l'échelle, elle devrait alors passer soit au transparent, soit à la couleur d'arrière-plan par défaut aux bordures droite, gauche et inférieure au minimum (en supposant que vous la placez en haut de la page). Cela donne au moins une transition élégante sur les écrans plus grands.