CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3

Intégration d'une Image de Fond Fixée dans l'Entête en HTML et CSS

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

Apprenez à intégrer une image de fond dans l'entête de votre page HTML et à la fixer pour un effet de parallaxe en explorant les propriétés background-image, background-size, et background-attachment.

Détails de la leçon

Description de la leçon

Cette leçon détaillée vous guide à travers les étapes pour intégrer une image de fond dans l'entête de votre page HTML et la fixer pour créer un effet de parallaxe. Nous commençons par modifier le code HTML existant pour y ajouter des divs avec des classes spécifiques comme Banner et Overlay. Ceci nous permet d'appliquer des styles CSS pour l'image de fond et l'overlay avec transparence. Ensuite, nous abordons les propriétés CSS nécessaires comme background-repeat-no-repeat et background-size-cover pour s'assurer que l'image recouvre entièrement la zone désignée sans répétition. Nous ajustons également les positions sur les axes X et Y pour centrer l'image. Enfin, nous voyons comment fixer l'image en utilisant la propriété background-attachment: fixed, produisant ainsi un effet parallaxe pendant le défilement de la page.

Objectifs de cette leçon

Les objectifs de cette vidéo sont :

  • Apprendre à intégrer une image de fond dans l'entête HTML.
  • Comprendre l'utilisation des propriétés CSS pour le style de fond.
  • Créer un effet de parallaxe en fixant l'image de fond.

Prérequis pour cette leçon

Pour suivre cette vidéo, vous devez avoir :

  • Des connaissances de base en HTML et CSS.
  • Un éditeur de code tel que Visual Studio Code.

Métiers concernés

Les métiers concernés par cette compétence incluent :

  • Développeur Web Front-End
  • Intégrateur Web
  • Designer UI/UX

Alternatives et ressources

Les alternatives possibles pour réaliser des effets similaires incluent :

  • Utiliser des frameworks CSS comme Bootstrap ou Tailwind CSS.
  • Explorer des plugins JavaScript pour des effets de parallaxe avancés.

Questions & Réponses

La propriété CSS est background-attachment.
En utilisant les valeurs 50% pour background-position-x et background-position-y.
La propriété CSS est background-repeat-no-repeat.