Vidéo: Episode 6 : Comment mettre un fond d' écran dans sa page web ? 2025
Il y a des situations où vous ne voulez qu'une seule copie d'une image d'arrière-plan sur votre site CSS3. Il se peut que l'image que vous avez utilisée soit quelque chose qui ne se répète pas bien ou soit assez grande pour que vous ne la vouliez pas vraiment répéter. La procédure suivante illustre une technique que vous pouvez utiliser pour indiquer au navigateur d'utiliser une seule copie d'une image d'arrière-plan.
-
Ouvrez la BackgroundPosition. Fichier CSS.
-
Modifiez le style du corps afin que l'image ne se répète pas, comme illustré ici.
body {background-image: url ("CuteCat.jpg"); couleur de fond: SaddleBrown; couleur: SeaGreen; taille de police: x-large; texte-ombre: 1px 1px Jaune; background-position: centre; background-attachment: fixé; background-repeat: pas de répétition; background-size: 80%;}La propriété background-repeat est définie sur no-repeat pour que le navigateur ne puisse afficher qu'une seule copie. Comme il n'y a qu'une seule copie et que l'image n'a pas la bonne taille pour fournir une bonne présentation lorsque l'utilisateur redimensionne le navigateur, vous devez également définir la propriété background-size pour redimensionner l'image automatiquement.
-
Enregistrez le fichier CSS en tant que NoRepeat. CSS.
-
Ouvrez la BackgroundPosition. Fichier HTML
-
Modifiez le tag afin qu'il ressemble à ceci:
-
Enregistrez le fichier HTML en tant que NoRepeat. HTML
-
Chargez la page NoRepeat.
Vous voyez l'arrière-plan. Il n'y a plus qu'une seule image au centre - et lorsque vous redimensionnez le navigateur, l'image est automatiquement redimensionnée.
