Comment concevoir une formation en CSS3

La plupart des pages que vous regardez ont une sorte de fond. La procédure suivante montre comment ajouter un fond en utilisant CSS3, que vous pouvez utiliser pour rendre votre page web plus attractive à un visiteur.

  1. Créez le ExternalCSS.HTML fichiers et ExternalCSS.CSS et les copier dans un nouveau dossier.

  2. Créer ou obtenir une image d'arrière-plan au format Joint Photographic Experts Group (JPEG) et nommez-le background.jpg.

  3. Ouvrir ExternalCSS.CSS.

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




    body {background-image: url ("background.jpg") - background-size: 100% -background-repeat: no-répétabilité}

    L'endroit le plus commun pour réserver des images de fond est dans le . Cependant, rien ne vous empêche d'utiliser horizons dans d'autres objets et de diverses autres manières.

    Le point de départ pour la plupart des milieux est la propriété background-image où vous pouvez spécifier l'image que vous souhaitez utiliser avec la méthode url (). Il est possible d'ajouter plusieurs images à l'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 apparaît à l'écran. L'exemple est une grande image, de sorte que vous voulez qu'il prenne toute la zone d'affichage. Utilisation de 100% que la valeur signifie que l'image est automatiquement redimensionnée pour occuper la zone cliente entière.

    Vous utilisez la propriété background-repeat pour déterminer si l'image se répète dans le fond. Il est commun pour les petites images pour répéter afin qu'ils prennent toute la zone d'affichage. Répétition d'une grande image tend à rendre le fond l'air confus et de nuire à l'apparence générale de l'écran.

  5. Recharger la page de test.

    Vous voyez l'effet de rendre le changement de style.

    image0.jpg
  6. Redimensionner la fenêtre du navigateur.

    Vous voyez que l'image de fond redimensionne automatiquement pour prendre la totalité de la zone d'affichage.