HDTutorial
FR
Comment ajouter une image de fond en HTML

La lecture charge le lecteur YouTube intégré (mode confidentialité renforcée).

Comment ajouter une image de fond en HTML

580 078 vues 25 octobre 2016 4:36

Voir sur YouTube
ChaîneCode Grammar

Chapitres

Description de l’auteur

Dans ce tutoriel HTML, nous allons apprendre à ajouter des images de fond à une page web en utilisant CSS. Vous découvrirez comment définir des couleurs, insérer des images, contrôler leur répétition et les redimensionner pour qu’elles remplissent entièrement la fenêtre du navigateur.

Ce tutoriel CSS couvre :
Ajouter des couleurs de fond avec du CSS en ligne
Utiliser [background-image: url()] avec une image provenant du web
Contrôler le comportement de répétition avec [no-repeat]
Redimensionner les images avec [background-size] (100 %, 75 %, etc.)
Étirer l’image sur toute la largeur et la hauteur
Déplacer le CSS des attributs [style] en ligne vers la balise [style] pour un code plus propre

Ce tutoriel est idéal pour les débutants et montre étape par étape comment rendre le fond de votre page web professionnel avec des images, et non pas seulement des couleurs unies.

⏱️ Minutage

00:00 – Introduction : ajouter des fonds en HTML
00:21 – Deux méthodes : balise style vs attribut style en ligne
00:30 – Ajouter une couleur de fond (noir, jaune, etc.)
01:01 – Utiliser [background-image: url()] avec des images externes
01:19 – Exemple avec un fond en mosaïque
01:43 – Utiliser [no-repeat] pour afficher une seule image
02:12 – Étirer le fond avec [background-size: 100 %]
02:41 – Redimensionner X et Y indépendamment (100 % 100 %, 75 %, etc.)
03:26 – Bonne pratique : déplacer le CSS des styles en ligne vers la balise [style]
04:00 – Code organisé vs modifications rapides en ligne
04:26 – Résumé et conclusion

🏷️ Mots-clés
Tutoriel HTML, image de fond HTML, tutoriel image de fond CSS, ajouter une image de fond HTML, fonds CSS HTML, background-size cover, background no-repeat, tutoriel HTML pour débutants, tutoriel CSS pour débutants, fond de page…

À propos de ce tutoriel

Code Grammar a publié ce tutoriel vidéo de 4:36 le 25 octobre 2016. Il a été vu 580 078 fois sur YouTube.

Catégorie
Éducation
Durée
4:36
Publié le
25 octobre 2016
Vues
580 078
J’aime
3 501

Partager

Pour aller plus loin

  • Les images en HTML - Apprendre le développement web | MDN developer.mozilla.org

    En résumé : si une image a du sens, en terme de contenu, vous devriez utiliser une image HTML. Si une image n'est que pure décoration, il vaut mieux utiliser les images d'arrière-plan CSS. Note : Vous en apprendrez beau…

  • Image en arrière plan sur une page html - Comment Ça Marche forums.commentcamarche.net

    en fait j'ai placé une image en background mais cela ne fonctionne pas,car l'image se repete et je n'en veeux qu'un seul,comment faire? si vous aurez bien l'amabilite de me repondre et ainsi aider a l'evolution de la sc…

  • HTML Tutorial - Insérer des images et photos en HTML tutorialehtml.com

    Vous pouvez la changer pour votre page de démarrage et ici vous avez une image avec un lien vers votre page de démarrage. HTML - Vignettes. Des vignettes sont des versions miniatures (moins de kilobytes) des images qui…

Ce tutoriel dans d’autres langues