Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Apprendre Application d’Images d’Arrière-Plan aux Éléments | Ajout d'Effets Décoratifs avec CSS
Fondamentaux De CSS

bookApplication d’Images d’Arrière-Plan aux Éléments

La propriété background-image permet d’ajouter une image en tant que fond d’un élément HTML. La syntaxe de base est très simple :

background-image: url("image-url.jpg");

Comme valeur pour la propriété background-image, on utilise url(), et à l’intérieur de ces parenthèses, on indique l’URL de l’image.

index.html

index.html

index.css

index.css

copy

background-repeat

Détermine si l’image sera répétée horizontalement, verticalement, dans les deux directions ou pas du tout.

background-repeat: repeat | repeat-x | repeat-y | no-repeat;
index.html

index.html

index.css

index.css

copy

background-position

background-position est utilisé pour définir la position de départ d'une image d'arrière-plan dans la zone d'arrière-plan d'un élément. Cette propriété permet de spécifier où l'image d'arrière-plan doit être placée et comment elle doit être positionnée par rapport à l'élément. Il est nécessaire de définir la position sur les axes x et y

background-position: x y
index.html

index.html

index.css

index.css

copy

background-size

background-size définit la taille de l'image d'arrière-plan d'un élément. Cette propriété permet d'adapter l'image à l'élément ou de fixer une taille spécifique pour l'image d'arrière-plan.

background-size: auto | cover | contain | value in px/em/rem;
  • auto conserve la taille d'origine de l'image d'arrière-plan (valeur par défaut) ;
  • cover adapte l'image pour couvrir entièrement l'élément tout en conservant son ratio, ce qui peut entraîner un rognage de l'image ;
  • contain adapte l'image pour qu'elle soit entièrement visible dans l'élément tout en conservant son ratio, ce qui peut laisser des espaces vides ;
  • value définit des dimensions personnalisées pour l'image d'arrière-plan, telles que 100px 50px ou des pourcentages comme 50%.
index.html

index.html

index.css

index.css

copy

1. Que fait la propriété background-image ?

2. Que fait la propriété background-repeat ?

3. Quelle propriété détermine la position de l'image d'arrière-plan d'un élément ?

question mark

Que fait la propriété background-image ?

Select the correct answer

question mark

Que fait la propriété background-repeat ?

Select the correct answer

question mark

Quelle propriété détermine la position de l'image d'arrière-plan d'un élément ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 5. Chapitre 2

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Suggested prompts:

Can you show me an example of how to use all these background properties together?

What is the difference between `cover` and `contain` for background-size?

How do I center a background image both vertically and horizontally?

Awesome!

Completion rate improved to 2.56

bookApplication d’Images d’Arrière-Plan aux Éléments

Glissez pour afficher le menu

La propriété background-image permet d’ajouter une image en tant que fond d’un élément HTML. La syntaxe de base est très simple :

background-image: url("image-url.jpg");

Comme valeur pour la propriété background-image, on utilise url(), et à l’intérieur de ces parenthèses, on indique l’URL de l’image.

index.html

index.html

index.css

index.css

copy

background-repeat

Détermine si l’image sera répétée horizontalement, verticalement, dans les deux directions ou pas du tout.

background-repeat: repeat | repeat-x | repeat-y | no-repeat;
index.html

index.html

index.css

index.css

copy

background-position

background-position est utilisé pour définir la position de départ d'une image d'arrière-plan dans la zone d'arrière-plan d'un élément. Cette propriété permet de spécifier où l'image d'arrière-plan doit être placée et comment elle doit être positionnée par rapport à l'élément. Il est nécessaire de définir la position sur les axes x et y

background-position: x y
index.html

index.html

index.css

index.css

copy

background-size

background-size définit la taille de l'image d'arrière-plan d'un élément. Cette propriété permet d'adapter l'image à l'élément ou de fixer une taille spécifique pour l'image d'arrière-plan.

background-size: auto | cover | contain | value in px/em/rem;
  • auto conserve la taille d'origine de l'image d'arrière-plan (valeur par défaut) ;
  • cover adapte l'image pour couvrir entièrement l'élément tout en conservant son ratio, ce qui peut entraîner un rognage de l'image ;
  • contain adapte l'image pour qu'elle soit entièrement visible dans l'élément tout en conservant son ratio, ce qui peut laisser des espaces vides ;
  • value définit des dimensions personnalisées pour l'image d'arrière-plan, telles que 100px 50px ou des pourcentages comme 50%.
index.html

index.html

index.css

index.css

copy

1. Que fait la propriété background-image ?

2. Que fait la propriété background-repeat ?

3. Quelle propriété détermine la position de l'image d'arrière-plan d'un élément ?

question mark

Que fait la propriété background-image ?

Select the correct answer

question mark

Que fait la propriété background-repeat ?

Select the correct answer

question mark

Quelle propriété détermine la position de l'image d'arrière-plan d'un élément ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 5. Chapitre 2
some-alt