Concevoir des arrière-plans en CSS3 - des nuls

La plupart des pages que vous regardez ont une sorte d'arrière-plan. La procédure suivante montre comment ajouter un arrière-plan en utilisant CSS3, que vous pouvez utiliser pour rendre votre page Web plus attrayante pour un visiteur.

1. Créez le fichier ExternalCSS. HTML et ExternalCSS. Fichiers CSS et copiez-les dans un nouveau dossier.

2. Créez ou obtenez une image de fond au format JPEG (Joint Photographic Experts Group) et nommez-la Background. JPG.

3. Ouvrir ExternalCSS. CSS.

4. Tapez le code suivant après les styles existants et enregistrez les modifications sur le disque.

   body {background-image: url ("Arrière-plan.jpg"); taille de fond: 100%; background-repeat: no-repeat;}
   

   L'endroit le plus courant pour réserver des images d'arrière-plan est le. Cependant, rien ne vous empêche d'utiliser les arrière-plans dans d'autres objets et de diverses autres manières.

   Le point de départ de la plupart des arrière-plans est la propriété background-image dans laquelle vous pouvez spécifier l'image que vous voulez utiliser avec la méthode url (). Il est possible d'ajouter plusieurs images en arrière-plan. Si vous le faites, le navigateur combine les images en une seule présentation.

   L'utilisation de la propriété background-size détermine la taille de l'image à l'écran. L'exemple est une grande image, donc vous voulez qu'il occupe toute la zone d'affichage. L'utilisation de 100% comme valeur signifie que l'image est automatiquement redimensionnée pour occuper toute la zone client.

   Vous utilisez la propriété background-repeat pour déterminer si l'image se répète en arrière-plan. Il est courant que les petites images se répètent afin qu'elles occupent toute la zone d'affichage. La répétition d'une grande image a tendance à rendre l'arrière-plan confus et à nuire à l'apparence générale de l'affichage.

5. Rechargez la page de test.

   Vous voyez l'effet de la modification du style.

   

6. Redimensionner la fenêtre du navigateur.

   Vous voyez que l'image d'arrière-plan est automatiquement redimensionnée pour occuper toute la zone d'affichage.