CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Maîtriser la Propriété CSS background-position

Maîtriser la Propriété CSS background-position

Positionner 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
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

Positionner une Image d'Arrière-Plan en CSS

Objectifs

Les objectifs de cette vidéo sont :

  • Comprendre l'utilisation de la propriété background-position en CSS.
  • Savoir positionner des images d'arrière-plan dans différentes parties d'un élément HTML.
  • Utiliser des unités de mesure et des mots clés pour un positionnement précis.

Résumé

Découvrez comment utiliser la propriété background-position en CSS pour placer avec précision les images d'arrière-plan.

Description

Dans cette leçon, nous abordons comment manipuler la propriété background-position en CSS pour positionner une image d'arrière-plan. Par défaut, une image d'arrière-plan est placée en haut à gauche de son conteneur, c'est-à-dire à 0 pixels sur l'axe X et 0 pixels sur l'axe Y. En ajustant ces valeurs, l'image peut être placée exactement où vous le souhaitez dans un élément HTML.

Pour positionner l'image à droite, vous pouvez utiliser une valeur en pixels ou en pourcentage. Par exemple, la valeur 50 pixels sur l'axe X la déplacera de 50 pixels vers la droite. Pour placer l'image à la fin du conteneur, vous pouvez utiliser 100% pour représenter la largeur complète de l'élément navigateur.

Il est également possible d'utiliser des mots clés comme left, right, top, bottom, et center pour positionner l'image de façon intuitive. Par exemple, en combinant right et bottom, vous positionnez l'image en bas à droite du conteneur.

Voir plus

Questions - réponses

Quelle est la valeur par défaut de la propriété background-position ?
La valeur par défaut de la propriété background-position est 0 pixels pour l'axe X et 0 pixels pour l'axe Y, ce qui place l'image en haut à gauche du conteneur.
Comment positionner une image au centre horizontalement et verticalement ?
Pour positionner une image au centre horizontalement et verticalement, utilisez les valeurs background-position: center center ou background-position: 50% 50%.
Quels mots clés peut-on utiliser avec background-position ?
Les mots clés que l'on peut utiliser avec background-position incluent top, bottom, left, right, et center.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 5 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 4 years
Commentaire
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !