CSS – Background



Vous pouvez définir les propriétés d'arrière-plan suivantes d'un élément:

  • La propriété background-color est utilisée pour définir la couleur d'arrière-plan d'un élément.

  • La propriété background-image est utilisée pour définir l'image d'arrière-plan d'un élément.

  • La propriété background-repeat est utilisée pour contrôler la répétition d'une image en arrière-plan.


  • La propriété background-position est utilisée pour contrôler la position d'une image en arrière-plan.

  • La propriété background-attachment permet de contrôler le défilement d'une image en arrière-plan.

  • La propriété background est utilisée comme un raccourci pour spécifier un certain nombre d'autres propriétés d'arrière-plan

Définir la couleur d'arrière-plan

Voici l'exemple qui montre comment définir la couleur d'arrière-plan pour un élément.

<html>
   <head>
   <body>
      <p style = "background-color:yellow;">
      Ce texte a une couleur de fond jaune.</p>
   </body>
   </head>
<html>
Il produira le résultat suivant -


This text has a yellow background color.


Définir l'image de fond :

Nous pouvons définir l'image d'arrière-plan en appelant les images stockées locales comme illustré ci-dessous



<html>
   <head>
      <style>
         body  {
            background-image: url("/css/images/css.jpg");
            background-color: #cccccc;
            text-align : center;
            padding-top : 50px ;
 
         }
      </style>
      <body>
         <h1> Bonjour le monde!</h1>
      </body>
   </head>
<html>







Répéter l'image de fond :

L'exemple suivant montre comment répéter l'image d'arrière-plan si une image est petite. Vous pouvez utiliser la valeur sans répétition pour la propriété background-repeat si vous ne voulez pas répéter une image. Dans ce cas, l'image ne s'affiche qu'une seule fois.

Par défaut, la propriété background-repeat aura une valeur de répétition.

  

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat;
         }
      </style>
   </head>
   <body>
      <h1> Bonjour le monde!</h1
   </body>
</html>




L'exemple suivant qui montre comment répéter l'image d'arrière-plan verticalement.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-y;
         }
      </style>
   </head>
   <body>
      <h1>Bonjour le monde !</h1>
   </body>
</html>




L'exemple suivant montre comment répéter l'image d'arrière-plan horizontalement.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-x;
         }
      </style>
   </head>
   <body>
            <h1>Bonjour le monde !</h1>
 
   </body>
</html>





Définir la position de l'image d'arrière-plan :

L'exemple suivant montre comment définir la position de l'image d'arrière-plan à 100 pixels du côté gauche.


<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px;
         }
      </style>
   </head>
   <body>
          <h1>Bonjour le monde !</h1>
 
   </body>
</html>

L'exemple suivant montre comment définir la position de l'image d'arrière-plan à 100 pixels du côté gauche et à 200 pixels du haut.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px 200px;
         }
      </style>
   </head>
   <body>
                <h1>Bonjour le monde !</h1>
   </body>
</html>

Définir l'attachement de fond :

L'attachement d'arrière-plan détermine si une image d'arrière-plan est fixe ou défile avec le reste de la page.

L'exemple suivant montre comment définir l'image d'arrière-plan fixe.

<!DOCTYPE html>
<html>
   <head>
   
      <style>
         body  {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
         }
      </style>
      
   </head>
   <body>
   
      <p>L'image d'arrière-plan est fixe. Essayez de faire défiler la page vers le           bas.</p>
            <p>L'image d'arrière-plan est fixe. Essayez de faire défiler la page vers le bas.</p>
      <p>L'image d'arrière-plan est fixe. Essayez de faire défiler la page vers le bas.</p>
      <p>L'image d'arrière-plan est fixe. Essayez de faire défiler la page vers le bas.</p>
      <p>L'image d'arrière-plan est fixe. Essayez de faire défiler la page vers le bas.</p>
      <p>L'image d'arrière-plan est fixe. Essayez de faire défiler la page vers le bas.</p>
      <p>L'image d'arrière-plan est fixe. Essayez de faire défiler la page vers le bas.</p>
      <p>L'image d'arrière-plan est fixe. Essayez de faire défiler la page vers le bas.</p>
           <p>L'image d'arrière-plan est fixe. Essayez de faire défiler la page vers le bas.</p>
 
      
   </body>
</html>

L'exemple suivant montre comment configurer l'image d'arrière-plan en défilement.

<!DOCTYPE html>
<html>
   <head>
   
      <style>
         body  {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-attachment:scroll;
         }.
      </style>
      
   </head>
   <body>
   
      <p<p>L'image d'arrière-plan est fixe. Essayez de faire défiler la page vers  le bas.</p>
            <p>L'image d'arrière-plan est fixe. Essayez de faire défiler la page vers le bas.</p>
      <p>L'image d'arrière-plan est fixe. Essayez de faire défiler la page vers le bas.</p>
      <p>L'image d'arrière-plan est fixe. Essayez de faire défiler la page vers le bas.</p>
      <p>L'image d'arrière-plan est fixe. Essayez de faire défiler la page vers le bas.</p>
      <p>L'image d'arrière-plan est fixe. Essayez de faire défiler la page vers le bas.</p>
      <p>L'image d'arrière-plan est fixe. Essayez de faire défiler la page vers le bas.</p>
      <p>L'image d'arrière-plan est fixe. Essayez de faire défiler la page vers le bas.</p>
           <p>L'image d'arrière-plan est fixe. Essayez de faire défiler la page vers le bas.</p>
 
      
   </body>
</html>

Sténographie

Vous pouvez utiliser la propriété background pour définir toutes les propriétés d'arrière-plan à la fois. Par exemple -


<p style="background:url(/images/pattern1.gif) repeat fixed;">
   Ce paragraphe a corrigé l'image de fond répétée.
</p>

Aucun commentaire

Inscription à : Articles ( Atom )
Fourni par Blogger.