CATALOGUE Code & Data Formation XHTML/CSS Apprendre HTML5 et CSS3 / Part 2 - Tuto CSS3: Les Feuilles de Style

Comprendre et Utiliser la Propriété CSS Background

Retour à la formation
Chapitre 3 Leçon 1
Précédent
Suivant

Cette leçon explique comment utiliser la propriété background en CSS pour ajouter des arrière-plans à vos éléments HTML, ainsi que les différentes options et propriétés associées comme background-color et background-image.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous allons explorer les différentes façons d'utiliser la propriété background en CSS pour ajouter des arrière-plans à vos éléments HTML. Nous débuterons par l'utilisation de background-color pour ajouter une couleur simple en arrière-plan d'un élément de type bloc tel que body, div, h1 ou p. Nous montrerons comment spécifier les couleurs en utilisant des noms de couleurs anglophones tels que 'orange', 'blue', 'red', etc.

Ensuite, nous aborderons l'ajout d'images en arrière-plan avec la propriété background-image, en utilisant la fonction url() pour lier une image de notre dossier. Nous discuterons également des problèmes courants liés à la répétition des images et comment les gérer avec les propriétés background-repeat, repeat-x et repeat-y.

Enfin, nous montrerons comment utiliser la propriété background-size pour ajuster la taille de l'image d'arrière-plan, en mettant un accent particulier sur l'utilisation de la valeur cover pour remplir toute la fenêtre du navigateur, indépendamment de sa taille. Nous aborderons aussi l'utilisation de background-position pour centrer l'image. En appliquant toutes ces propriétés ensemble, nous créons une image d'arrière-plan qui s'adapte parfaitement, offrant un résultat professionnel et esthétiquement plaisant.

Objectifs de cette leçon

Les objectifs de cette vidéo sont d'apprendre à :

  • Utiliser la propriété background en CSS.
  • Ajouter des couleurs et des images en arrière-plan.
  • Gérer la répétition et la position des images de fond.
  • Adapter la taille de l'image de fond à la fenêtre du navigateur.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé de :

  • Connaître les bases du HTML.
  • Avoir des notions fondamentales en CSS.

Métiers concernés

Les compétences acquises dans cette vidéo sont utiles pour les métiers suivants :

  • Développeur front-end
  • Web designer
  • Intégrateur web

Alternatives et ressources

Bien que cette leçon se concentre sur CSS, vous pouvez également utiliser des outils comme Bootstrap ou Tailwind CSS pour gérer les arrière-plans de manière plus simplifiée.

Questions & Réponses

La propriété background-color en CSS permet de définir une couleur de fond pour un élément HTML.
Pour empêcher une image de fond de se répéter, on utilise la propriété background-repeat avec la valeur no-repeat.
La propriété background-size est utilisée pour ajuster la taille de l'image de fond. La valeur cover permet de couvrir toute la fenêtre du navigateur.