Appliquer des styles d'arrière-plan en CSS

Introduction

Dans ce laboratoire, vous apprendrez à appliquer des styles d'arrière-plan avancés à l'aide de CSS, en vous concentrant sur l'amélioration de la conception des pages web grâce à la manipulation des couleurs et des images. Le laboratoire couvre des techniques essentielles telles que la définition des couleurs d'arrière-plan pour les éléments HTML, l'ajout et le dimensionnement des images d'arrière-plan, le contrôle du positionnement et de la répétition des images, et la combinaison de plusieurs propriétés d'arrière-plan pour créer des mises en page web visuellement attrayantes.

Grâce à des exemples pratiques et concrets, vous explorerez différentes méthodes de spécification des couleurs d'arrière-plan en utilisant des couleurs nommées, des codes hexadécimaux et des fonctions RGB, tout en apprenant à intégrer des images d'arrière-plan avec des techniques de dimensionnement et de positionnement précises. À la fin de ce laboratoire, vous aurez acquis des compétences pratiques dans l'utilisation des propriétés d'arrière-plan CSS pour créer des conceptions de pages web plus dynamiques et engageantes.

Définir la couleur d'arrière-plan pour les éléments HTML

Dans cette étape, vous apprendrez à définir les couleurs d'arrière-plan des éléments HTML à l'aide de CSS. Les couleurs d'arrière-plan sont un moyen fondamental d'améliorer la conception visuelle des pages web en ajoutant de la couleur à différents éléments.

Tout d'abord, créons un fichier HTML pour démontrer le style de couleur d'arrière-plan. Ouvrez le WebIDE et créez un nouveau fichier nommé styles.html dans le répertoire ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Background Color Example</title>
    <style>
      /* We'll add our CSS here */
    </style>
  </head>
  <body>
    <div class="box1">First Box</div>
    <div class="box2">Second Box</div>
    <p class="paragraph">This is a paragraph with a background color.</p>
  </body>
</html>

Maintenant, ajoutons du CSS pour définir les couleurs d'arrière-plan de différents éléments. Mettez à jour la section <style> dans le fichier HTML :

.box1 {
  background-color: blue;
  color: white;
  padding: 20px;
  margin: 10px;
}

.box2 {
  background-color: #ff5733;
  color: white;
  padding: 20px;
  margin: 10px;
}

.paragraph {
  background-color: rgb(200, 230, 255);
  padding: 15px;
}

Dans cet exemple, nous avons démontré trois façons de spécifier les couleurs d'arrière-plan :

Couleur nommée (blue)
Code couleur hexadécimal (#FF5733)
Fonction de couleur RGB (rgb(200, 230, 255))

Enregistrez le fichier et ouvrez-le dans un navigateur web pour voir les différentes couleurs d'arrière-plan appliquées aux éléments.

Ajouter une image d'arrière-plan avec dimensionnement

Dans cette étape, vous apprendrez à ajouter des images d'arrière-plan aux éléments HTML et à contrôler leur dimensionnement à l'aide de CSS. Nous continuerons à nous baser sur l'exemple précédent en modifiant le fichier styles.html dans le répertoire ~/project.

L'image d'exemple se trouve dans le répertoire ~/project.

Maintenant, mettez à jour le fichier styles.html avec le contenu suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Background Image Sizing</title>
    <style>
      .image-container {
        width: 500px;
        height: 300px;
        border: 2px solid black;
        margin: 20px;
      }

      .cover-background {
        background-image: url("background-sample.jpg");
        background-size: cover;
      }

      .contain-background {
        background-image: url("background-sample.jpg");
        background-size: contain;
      }

      .custom-size-background {
        background-image: url("background-sample.jpg");
        background-size: 200px 150px;
      }
    </style>
  </head>
  <body>
    <div class="image-container cover-background">
      Cover: Fills entire container
    </div>
    <div class="image-container contain-background">
      Contain: Fits entire image
    </div>
    <div class="image-container custom-size-background">
      Custom Size: 200x150 pixels
    </div>
  </body>
</html>

Cet exemple démontre trois façons différentes de dimensionner les images d'arrière-plan :

background-size: cover; - Redimensionne l'image pour couvrir entièrement le conteneur
background-size: contain; - Redimensionne l'image pour qu'elle tienne entièrement dans le conteneur
background-size: 200px 150px; - Définit une taille spécifique en pixels pour l'image d'arrière-plan

Lorsque vous ouvrirez ce fichier HTML dans un navigateur, vous verrez trois techniques de dimensionnement d'image d'arrière-plan différentes.

Positionner l'image d'arrière-plan

Dans cette étape, vous apprendrez à contrôler le positionnement des images d'arrière-plan à l'aide de CSS. Nous continuerons à modifier le fichier styles.html dans le répertoire ~/project pour démontrer différentes techniques de positionnement d'arrière-plan.

Mettez à jour le fichier styles.html avec le contenu suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Background Image Positioning</title>
    <style>
      .image-container {
        width: 500px;
        height: 300px;
        border: 2px solid black;
        margin: 20px;
        color: white;
        font-weight: bold;
      }

      .top-left {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: top left;
      }

      .center {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: center;
      }

      .bottom-right {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: bottom right;
      }

      .custom-position {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: 20% 80%;
      }
    </style>
  </head>
  <body>
    <div class="image-container top-left">Top Left Position</div>
    <div class="image-container center">Center Position</div>
    <div class="image-container bottom-right">Bottom Right Position</div>
    <div class="image-container custom-position">Custom Position (20% 80%)</div>
  </body>
</html>

Cet exemple démontre quatre façons différentes de positionner les images d'arrière-plan :

background-position: top left; - Positionne l'image dans le coin supérieur gauche
background-position: center; - Centre l'image dans le conteneur
background-position: bottom right; - Positionne l'image dans le coin inférieur droit
background-position: 20% 80%; - Utilise des valeurs en pourcentage pour un positionnement personnalisé

Lorsque vous ouvrirez ce fichier HTML dans un navigateur, vous verrez comment les différentes valeurs de positionnement affectent la disposition de l'image d'arrière-plan.

Contrôler la répétition de l'image d'arrière-plan

Dans cette étape, vous apprendrez à contrôler la répétition des images d'arrière-plan à l'aide de la propriété CSS background-repeat. Nous continuerons à modifier le fichier styles.html dans le répertoire ~/project pour démontrer différentes techniques de répétition.

Mettez à jour le fichier styles.html avec le contenu suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Background Image Repetition</title>
    <style>
      .image-container {
        width: 500px;
        height: 300px;
        border: 2px solid black;
        margin: 20px;
        color: white;
        font-weight: bold;
      }

      .repeat {
        background-image: url("background-sample.jpg");
        background-size: 100px 100px;
        background-repeat: repeat;
      }

      .repeat-x {
        background-image: url("background-sample.jpg");
        background-size: 100px 100px;
        background-repeat: repeat-x;
      }

      .repeat-y {
        background-image: url("background-sample.jpg");
        background-size: 100px 100px;
        background-repeat: repeat-y;
      }

      .no-repeat {
        background-image: url("background-sample.jpg");
        background-size: 200px 200px;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="image-container repeat">Repeat (Default)</div>
    <div class="image-container repeat-x">Repeat X (Horizontal)</div>
    <div class="image-container repeat-y">Repeat Y (Vertical)</div>
    <div class="image-container no-repeat">No Repeat</div>
  </body>
</html>

Cet exemple démontre quatre techniques différentes de répétition d'images d'arrière-plan :

background-repeat: repeat; - Répète l'image horizontalement et verticalement (par défaut)
background-repeat: repeat-x; - Répète l'image uniquement horizontalement
background-repeat: repeat-y; - Répète l'image uniquement verticalement
background-repeat: no-repeat; - Empêche l'image de se répéter

Lorsque vous ouvrirez ce fichier HTML dans un navigateur, vous verrez comment les différentes valeurs de répétition affectent l'affichage de l'image d'arrière-plan.

Combiner plusieurs propriétés d'arrière-plan

Dans cette étape, vous apprendrez à combiner plusieurs propriétés d'arrière-plan pour créer des conceptions d'arrière-plan plus complexes et intéressantes. Nous modifierons le fichier styles.html dans le répertoire ~/project pour démontrer des techniques avancées de style d'arrière-plan.

Mettez à jour le fichier styles.html avec le contenu suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Multiple Background Properties</title>
    <style>
      .image-container {
        width: 600px;
        height: 400px;
        border: 2px solid black;
        margin: 20px;
        color: white;
        font-weight: bold;
        padding: 20px;
      }

      .multiple-backgrounds {
        background-image:
          linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
          url("background-sample.jpg");
        background-size: cover, cover;
        background-position: center, center;
        background-repeat: no-repeat, no-repeat;
      }

      .layered-backgrounds {
        background-image:
          url("small-pattern.jpg"), linear-gradient(to right, #ff6b6b, #4ecdc4);
        background-size:
          100px 100px,
          cover;
        background-position:
          top left,
          center;
        background-repeat: repeat, no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="image-container multiple-backgrounds">
      Overlay Background with Image
    </div>
    <div class="image-container layered-backgrounds">
      Layered Background with Pattern and Gradient
    </div>
  </body>
</html>

small-pattern.jpg se trouve dans le répertoire ~/project.

Cet exemple démontre deux techniques avancées d'arrière-plan :

Arrière-plans multiples avec superposition :
- Utilise un dégradé linéaire pour créer une superposition semi-transparente
- Combine le dégradé avec une image d'arrière-plan
- Applique une taille, un positionnement et une répétition cohérents
Arrière-plans superposés :
- Combine une image de motif répétitif avec un dégradé linéaire
- Utilise des tailles et des positionnements différents pour chaque couche d'arrière-plan

Lorsque vous ouvrirez ce fichier HTML dans un navigateur, vous verrez comment plusieurs propriétés d'arrière-plan peuvent créer des conceptions complexes et visuellement intéressantes.

Résumé

Dans ce laboratoire, les participants ont appris à appliquer des styles d'arrière-plan en CSS grâce à une approche complète, étape par étape. Le laboratoire a couvert des techniques essentielles pour améliorer la conception des pages web, notamment la définition des couleurs d'arrière-plan à l'aide de différentes méthodes telles que les couleurs nommées, les codes hexadécimaux et les fonctions RGB, ainsi que l'exploration de la manipulation des images d'arrière-plan.

Les exercices pratiques ont démontré comment ajouter des images d'arrière-plan aux éléments HTML, contrôler leur taille, leur positionnement et leur répétition, et combiner plusieurs propriétés d'arrière-plan. En travaillant sur des exemples pratiques, les apprenants ont acquis des compétences pratiques dans l'utilisation du CSS pour créer des arrière-plans de pages web visuellement attrayants et dynamiques avec diverses techniques de style.