CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Comment insérer une image de fond avec du texte centré en HTML et CSS

Comment insérer une image de fond avec du texte centré en HTML et CSS

Placer une image d'en-tête
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
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Étapes pour intégrer et centrer du texte sur une image de fond

Objectifs

Les objectifs de cette vidéo sont :
1. Apprendre à insérer et styliser une image de fond en CSS.
2. Comprendre comment centrer du contenu à la fois horizontalement et verticalement.
3. Améliorer la présentation visuelle de vos pages web.

Résumé

Découvrez comment insérer une image de fond et centrer un titre en HTML et CSS.

Description

Dans cette leçon, nous allons voir comment insérer une image de fond dans une section HTML en utilisant CSS, tout en centrant un titre à l'intérieur de cette image. Nous illustrerons le processus à travers un exemple pratique, en suivant les étapes ci-dessous :


1. Créer une balise div avec une classe pour la bannière.
2. Intégrer un titre (balise h2) à l'intérieur de cette div.
3. Utiliser CSS pour ajouter une image de fond à la classe bannière.
4. Appliquer des techniques de centrage pour positionner le texte correctement à la fois horizontalement et verticalement en utilisant des propriétés CSS comme text-align, padding et margin.
5. Finaliser le style en ajoutant du style au texte, comme la couleur, la taille de police, etc.


Ce tutoriel prend en compte les bonnes pratiques pour un rendu optimal, y compris l'utilisation de background-size: cover et background-position.

Voir plus

Questions - réponses

Pourquoi utiliser une <strong>div</strong> pour insérer une image de fond ?
Utiliser une div permet plus de flexibilité dans le placement et le style du contenu par rapport à l'image de fond.
Quelle propriété CSS est utilisée pour ne pas répéter une image de fond ?
La propriété background-repeat: no-repeat est utilisée pour empêcher la répétition de l'image de fond.
Comment centrer horizontalement et verticalement un texte à l'intérieur d'un conteneur en CSS ?
On peut centrer horizontalement avec text-align: center et verticalement avec un padding adéquat ou flexbox.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 4 months
Commentaire
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 1 year
Commentaire
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 years
Commentaire
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 3 years
Commentaire
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !