CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Apprendre à insérer une image de fond en CSS

Apprendre à insérer une image de fond en CSS

Dimensionner l'image de fond
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre CSS 3
Revoir le teaser Je m'abonne
4,5
Transcription
Cette leçon fait partie de la formation
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
Cette leçon fait partie de la formation
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Insérer et ajuster une image de fond

Objectifs

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.

Résumé

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.

Description

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.

Voir plus

Questions fréquentes

Quelle propriété CSS permet d'insérer une image de fond ?
La propriété CSS qui permet d'insérer une image de fond est background-image.
Que fait la propriété background-repeat ?
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).
Comment centrer une image de fond en CSS ?
Pour centrer une image de fond en CSS, on utilise la propriété background-position avec la valeur center.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 1 an
La formation est divisée en 90 modules sans lien entre eux et sans progression pédagogique. Il faut les réorganiser par thème pour donner plus de cohérence et donner de la progression pédagogique à la formation. Multiples fautes d'orthographe dans les textes.
henridjithat
Il y a 2 ans
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 ans
J'en suis arrivé au bout.. Un vrai marathon. Très longue formation, à mon avis c'est plutôt 30h de cours et non pas 15h.
Après c'est une formation hyper claire et détaillée. L'auteur a fait un panorama complêt sur le CSS3.
g.vanleynseele
Il y a 4 ans
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !