Accueil Formations Apprendre CSS 3

Apprendre à insérer une image de fond en CSS

Retour à la formation
Chapitre 25 Leçon 4
Précédent
Suivant

Découvrez comment insérer une image de fond et l'ajuster pour qu'elle remplisse entièrement l'espace disponible sur votre page web en utilisant CSS.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous allons voir comment insérer une image en fond et lui demander de remplir entièrement l'espace disponible dans la fenêtre de notre navigateur. Nous allons utiliser plusieurs propriétés CSS.

Nous démarrons avec la propriété background-image et spécifions l'image à utiliser avec url(). Ensuite, nous utilisons background-repeat pour éviter la répétition de l'image.

Pour ajuster la taille de l'image, nous avons plusieurs options avec background-size, comme extcode{100%} (qui s'ajuste en fonction de la largeur), contain (qui s'ajuste en fonction de l'élément conteneur), et cover (qui couvre l'intégralité de l'espace disponible).

Enfin, la propriété background-position permet de centrer l'image dans la fenêtre en utilisant center pour les axes x et y.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de :

  • Apprendre à insérer une image de fond avec CSS.
  • Comprendre comment ajuster la position et la taille de l'image pour qu'elle couvre l'espace disponible.
  • Découvrir les différentes valeurs de la propriété background-size et savoir les utiliser en fonction des besoins.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé d'avoir des connaissances de base en HTML et CSS.

Métiers concernés

Les compétences acquises dans cette leçon sont utiles pour les développeurs web, les intégrateurs et les web designers qui travaillent sur la création et la mise en page de sites web modernes.

Alternatives et ressources

Il existe plusieurs façons d'ajuster une image de fond avec CSS, telles que l'utilisation des frameworks comme Bootstrap qui offrent des classes utilitaires pour gérer les images de fond de manière plus simple.

Questions & Réponses

La propriété CSS qui permet d'insérer une image de fond est background-image.
La propriété background-repeat contrôle si et comment l'image de fond doit se répéter (par défaut elle se répète).
Pour centrer une image de fond en CSS, on utilise la propriété background-position avec la valeur center.