Maintenant nous allons attaquer au fond d'écran de notre page. On peut comprendre qu'on va sûrement se servir de
background-color. Donc voici le code :
Notez que j'ai utilisé <!-- et --> pour afficher un commentaire, qui normalement n'est pas écrit dans le site web mais c'est pour se rappeler à quoi sert ceci et cela.
Bon, et bien on va le tester ce code en allant ici.
Tout c'est bien passé mais il est un peu sombre quand même, je pense qu'il faut mettre "background-color: aqua" au lieu de "background-color: black".
Essayez par vous même et il sera déjà plus rassurant mais un peu moins lisible.
C'est bien comme fond d'écran mais moi je voudrais une photo.
Et bien il suffit de faire comme ceci :
Et voilà, vous avez juste à mettre background-image: url("votre_video.format");, il n'y a rien de plus simple.
Modifions le code de toute à l'heure :
N'oubliez pas de mettre votre photo dans le même répertoire que vos pages HTML.
Bien, si vous voulez l'image, cliquez sur le lien.
Télécharger l'image
Maintenant, voici la page.
C'est déjà plus beau que du noir où je ne sais pas quoi, non ?
Je ne sais pas si vous avez remarqué, mais si on rapetissit la page, on voit que l'image est répété en mosaïque.
On va donc utiliser background-repeat.
On peut lui mettre divers truc :
no-repeat: l'image de fond ne se répète pas,
repeat-x: l'image est répété que horizontalement,
repeat-y: l'image est répété que verticalement,
repeat: utilisé par défaut, il se répète en mosaïque.
background-attachment sert à savoir si l'image bouge avec vous ou reste fixe. Il y a deux instructions :
fixed: L'élément reste fixe.
scroll: L'élément vous suivra.
background-position sert à positionner l'élément, par exemple:
Qu'ai-je fait ? J'ai tout simplement positionné mon image à 10 pixels de la gauche et 25 pixels du haut. Je peux très bien utiliser
TOP, RIGHT, LEFT, BOTTOM ou CENTER si j'ai envie et je peux même les mettre ensemble (BOTTOM RIGHT => En bas à droite).
On se retrouve au question.