Propriétés CSS liées à l'arrière-plan

Articles

Cet article explique les propriétés CSS liées à l'arrière-plan.

Vous pouvez apprendre à décrire des propriétés telles que les paramètres d'arrière-plan, la position et la répétition.

YouTube Video

Création de HTML pour aperçu

css-background.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-background.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Background-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Background And Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>background-color</h3>
 23            <section>
 24                <header><h4>background-color: red</h4></header>
 25                <section class="sample-view">
 26                    <div class="red-example">This is a red background.</div>
 27                </section>
 28                <header><h4>background-color: #FF5733</h4></header>
 29                <section class="sample-view">
 30                    <div class="hex-example">This is a background with hex color (#FF5733).</div>
 31                </section>
 32                <header><h4>background-color: rgb(255, 87, 51)</h4></header>
 33                <section class="sample-view">
 34                    <div class="rgb-example">This is a background with RGB color (rgb(255, 87, 51)).</div>
 35                </section>
 36                <header><h4>background-color: rgba(255, 87, 51, 0.7)</h4></header>
 37                <section class="sample-view">
 38                    <div class="rgba-example">This is a background with RGBA color (rgba(255, 87, 51, 0.7)).</div>
 39                </section>
 40                <header><h4>background-color: hsl(14, 100%, 60%)</h4></header>
 41                <section class="sample-view">
 42                    <div class="hsl-example">This is a background with HSL color (hsl(14, 100%, 60%)).</div>
 43                </section>
 44                <header><h4>background-color: hsla(14, 100%, 60%, 0.7)</h4></header>
 45                <section class="sample-view">
 46                    <div class="hsla-example">This is a background with HSLA color (hsla(14, 100%, 60%, 0.7)).</div>
 47                </section>
 48                <header><h4>background-color: transparent</h4></header>
 49                <section class="sample-view">
 50                    <div class="transparent-example">This is a background with transparency (transparent).</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>background-image</h3>
 56            <section>
 57                <header><h4>background-image: url('image.jpg')</h4></header>
 58                <section class="sample-view">
 59                    <div class="background-image-example">This is a background image.</div>
 60                </section>
 61                <header><h4>background-image: linear-gradient(to right, red, blue)</h4></header>
 62                <section class="sample-view">
 63                    <div class="background-image-gradient">This is a background gradient.</div>
 64                </section>
 65            </section>
 66        </article>
 67        <article>
 68            <h3>background-position</h3>
 69            <section>
 70                <header><h4>background-position: top left</h4></header>
 71                <section class="sample-view">
 72                    <div class="top-left-example">Top Left</div>
 73                </section>
 74                <header><h4>background-position: center</h4></header>
 75                <section class="sample-view">
 76                    <div class="center-example">Center</div>
 77                </section>
 78                <header><h4>background-position: bottom right</h4></header>
 79                <section class="sample-view">
 80                    <div class="bottom-right-example">Bottom Right</div>
 81                </section>
 82            </section>
 83        </article>
 84        <article>
 85            <h3>background-size</h3>
 86            <section>
 87                <header><h4>background-size: cover</h4></header>
 88                <section class="sample-view">
 89                    <div class="cover-example">Cover</div>
 90                </section>
 91                <header><h4>background-size: contain</h4></header>
 92                <section class="sample-view">
 93                    <div class="contain-example">Contain</div>
 94                </section>
 95                <header><h4>background-size: 100px 100px</h4></header>
 96                <section class="sample-view">
 97                    <div class="fixed-size-example">100px by 100px</div>
 98                </section>
 99            </section>
100        </article>
101        <article>
102            <h3>background-repeat</h3>
103            <section>
104                <header><h4>background-repeat: repeat</h4></header>
105                <section class="sample-view">
106                    <div class="repeat-example">Repeat</div>
107                </section>
108                <header><h4>background-repeat: repeat-x</h4></header>
109                <section class="sample-view">
110                    <div class="repeat-x-example">Repeat X</div>
111                </section>
112                <header><h4>background-repeat: no-repeat</h4></header>
113                <section class="sample-view">
114                    <div class="no-repeat-example">No Repeat</div>
115                </section>
116                <header><h4>background-repeat: space</h4></header>
117                <section class="sample-view">
118                    <div class="space-example">Space</div>
119                </section>
120                <header><h4>background-repeat: round</h4></header>
121                <section class="sample-view">
122                    <div class="round-example">Round</div>
123                </section>
124            </section>
125        </article>
126    </main>
127</body>
128</html>

Arrière-plan et Décoration

Propriété `background-color`

 1/* Background color specification */
 2.red-example {
 3    background-color: red;
 4}
 5
 6.hex-example {
 7    background-color: #FF5733;
 8}
 9
10.rgb-example {
11    background-color: rgb(255, 87, 51);
12}
13
14.rgba-example {
15    background-color: rgba(255, 87, 51, 0.7);
16}
17
18.hsl-example {
19    background-color: hsl(14, 100%, 60%);
20}
21
22.hsla-example {
23    background-color: hsla(14, 100%, 60%, 0.7);
24}
25
26.transparent-example {
27    background-color: transparent;
28    color: black;
29}

La propriété background-color est utilisée en CSS pour définir la couleur d'arrière-plan d'un élément. Vous pouvez spécifier la couleur affichée derrière le texte et d'autres éléments, et les couleurs peuvent être définies dans divers formats. La méthode de spécification des couleurs est similaire à la propriété color, mais vous pouvez également définir un arrière-plan complètement transparent en utilisant transparent.

Explication :

red-example classe spécifie la couleur de fond comme rouge en utilisant un mot-clé.
hex-example classe spécifie la couleur de fond avec un code hexadécimal.
rgb-example classe spécifie la couleur de fond en utilisant le format RGB.
rgba-example classe spécifie la couleur de fond avec le format RGBA, ajoutant de la transparence.
hsl-example classe spécifie la couleur de fond avec le format HSL.
hsla-example classe spécifie la couleur de fond avec le format HSLA, ajoutant de la transparence.
transparent-example classe définit le fond comme transparent.

Propriété `background-image`

 1/* Background image styles */
 2.background-image-example {
 3    /* Specify the image URL */
 4    background-image: url('image.jpg');
 5    /* Scale the image to cover the entire element */
 6    background-size: cover;
 7    /* Center the image */
 8    background-position: center;
 9    /* Disable image repetition */
10    background-repeat: no-repeat;
11    color: white;
12    display: flex;
13    align-items: center;
14    justify-content: center;
15}
16
17/* Gradient background styles */
18.background-image-gradient {
19    /* Gradient from left to right */
20    background-image: linear-gradient(to right, red, blue);
21    color: white;
22    display: flex;
23    align-items: center;
24    justify-content: center;
25}

La propriété background-image est utilisée pour définir une image comme arrière-plan d'un élément. L'image spécifiée est affichée comme arrière-plan de l'élément, et sa taille, sa position ainsi que son mode de répétition peuvent être ajustés avec d'autres propriétés associées. Nous expliquerons également ultérieurement les propriétés associées comme background-size, background-position et background-repeat.

Explication :

background-image-example classe utilise la propriété background-image pour définir image.jpg comme fond. background-size: cover permet à l'image de couvrir l'intégralité de l'élément, et background-position: center centre l'image. La répétition est désactivée avec background-repeat: no-repeat.
La classe background-image-gradient utilise linear-gradient() pour définir un dégradé d'arrière-plan allant du rouge au bleu. Le dégradé est affiché de gauche à droite.

Types de valeurs pouvant être spécifiées

La propriété background-image peut prendre les valeurs suivantes.

url() : Spécifie l'URL de l'image d'arrière-plan. Incluez le fichier image dans url(). (ex.url('image.jpg'))
none: Spécifie de ne pas définir d'image de fond. C'est la valeur par défaut.
Dégradés : Il est également possible de définir des dégradés en tant qu'images d'arrière-plan à l'aide des fonctionnalités de dégradé CSS. (ex.linear-gradient(), radial-gradient())

Points clés de la propriété `background-image`

Taille et positionnement des images : La taille et le positionnement des images d'arrière-plan peuvent être contrôlés précisément avec d'autres propriétés, permettant des ajustements de conception. Par exemple, spécifier background-size: cover étire l'image pour couvrir toute la zone, supprimant ainsi tout rognage.
Utilisation des dégradés : Au lieu d'une image, vous pouvez utiliser un dégradé comme arrière-plan, ajoutant un élément dynamique au design.

Propriété `background-position`

 1/* Positioned at the top-left */
 2.top-left-example {
 3    background-image: url('image.jpg');
 4    background-position: top left;
 5    background-size: cover;
 6    background-repeat: no-repeat;
 7    background-color: lightblue;
 8    height: 100px;
 9}
10
11/* Centered */
12.center-example {
13    background-image: url('image.jpg');
14    background-position: center;
15    background-size: cover;
16    background-repeat: no-repeat;
17    background-color: lightcoral;
18    height: 100px;
19}
20
21/* Positioned at the bottom-right */
22.bottom-right-example {
23    background-image: url('image.jpg');
24    background-position: bottom right;
25    background-size: cover;
26    background-repeat: no-repeat;
27    background-color: lightgreen;
28    height: 100px;
29}

La propriété background-position est utilisée pour spécifier la position d'une image d'arrière-plan à l'intérieur d'un élément. En contrôlant où apparaît l'image d'arrière-plan à l'intérieur de l'élément, vous pouvez créer des mises en page qui correspondent à votre design. La valeur par défaut est 0% 0%, plaçant l'image dans le coin supérieur gauche.

Explication :

top-left-example classe spécifie la position de l'image en haut gauche, plaçant l'image dans le coin supérieur gauche.
center-example classe positionne l'image au centre en utilisant l'attribut center.
bottom-right-example classe spécifie la position de l'image en bas droite, plaçant l'image dans le coin inférieur droit.

Types de valeurs pouvant être spécifiées

La propriété background-position peut prendre les types de valeurs suivants.

Mots clés : Vous pouvez spécifier left, right, top, bottom, center.
- Spécifier center placera l'image d'arrière-plan au centre de l'élément.
- Spécifier right placera l'image d'arrière-plan sur le côté droit.
- Spécifier top left placera l'image d'arrière-plan dans le coin supérieur gauche.
- Spécifier bottom right placera l'image de fond dans le coin inférieur droit.
Longueur ou pourcentage : Vous pouvez spécifier des valeurs comme 10px 20px, 50% 50%.
- Spécifier 10px 20px placera l'image de fond à 10px du bord gauche et 20px du bord supérieur.
- Spécifier 50% 50% centrera l'image de fond à la fois horizontalement et verticalement.
Fonction calc() : Permet un positionnement plus précis en utilisant des calculs CSS.

La propriété `background-size`

 1/* Fit the image to cover the entire area */
 2.cover-example {
 3    background-image: url('image.jpg');
 4    /* The image covers the entire element */
 5    background-size: cover;
 6    background-color: lightblue;
 7}
 8
 9/* Fit the image within the element */
10.contain-example {
11    background-image: url('image.jpg');
12    /* The image fits within the element */
13    background-size: contain;
14    background-color: lightgreen;
15}
16
17/* Display at a fixed size */
18.fixed-size-example {
19    background-image: url('image.jpg');
20    /* Fixed width of 100px and height of 100px */
21    background-size: 100px 100px;
22    background-color: lightcoral;
23}

La propriété background-size est utilisée pour spécifier la taille d'une image de fond pour un élément. En utilisant cette propriété, vous pouvez ajuster la manière dont l'image de fond est affichée, qu'elle remplisse l'intégralité de l'élément ou conserve sa taille d'origine, pour s'adapter au design. La valeur par défaut est auto, qui conserve la taille d'origine de l'image de fond.

Explication :

cover-example classe spécifie cover. L'image sera agrandie pour couvrir l'intégralité de l'élément, mais des parties peuvent être coupées.
contain-example classe spécifie contain. L'image sera ajustée pour tenir dans l'élément, mais des espaces vides peuvent apparaître.
fixed-size-example classe spécifie une taille fixe pour l'image de fond, avec une largeur et une hauteur de 100px chacune.

Types de valeurs pouvant être spécifiées

La propriété background-size peut recevoir les types de valeurs suivants.

Mots-clés
- auto : Conserve la taille par défaut de l'image (la largeur et la hauteur sont déterminées automatiquement).
- cover : Ajuste la taille de l'image de fond pour couvrir complètement l'élément. Elle remplira l'intégralité de l'élément, mais des parties de l'image peuvent être coupées.
- contain : Ajuste la taille de l'image pour qu'elle tienne dans l'élément, mais ne couvre pas l'intégralité de celui-ci. Le rapport d'aspect de l'image est conservé.
Valeurs numériques (px, %, em, etc.)
- Largeur et hauteur : Spécifiez explicitement la largeur et la hauteur. Si une seule valeur est spécifiée, elle s'applique à la largeur, et la hauteur est ajustée automatiquement.
- Pourcentage : Spécifiez la taille de l'image de fond comme un pourcentage de la taille de l'élément. Par exemple, 50% 50% définit l'image à la moitié de la largeur et de la hauteur de l'élément.

Propriété `background-repeat`

 1/* Repeat vertically and horizontally */
 2.repeat-example {
 3    background-image: url('pattern.png');
 4    background-repeat: repeat;
 5    background-size: auto;
 6}
 7
 8/* Repeat only horizontally */
 9.repeat-x-example {
10    background-image: url('pattern.png');
11    background-repeat: repeat-x;
12    background-size: auto;
13}
14
15/* No repetition */
16.no-repeat-example {
17    background-image: url('pattern.png');
18    background-repeat: no-repeat;
19    background-size: auto;
20}
21
22/* Space out evenly */
23.space-example {
24    background-image: url('pattern.png');
25    background-repeat: space;
26    background-size: auto;
27    width: 90px;
28    height: 60px;
29}
30
31/* Resize and repeat */
32.round-example {
33    background-image: url('pattern.png');
34    background-repeat: round;
35    background-size: auto;
36}

La propriété background-repeat est utilisée pour contrôler comment l'image de fond d'un élément est répétée. Par défaut, l'image de fond est répétée horizontalement et verticalement à l'intérieur de l'élément, mais vous pouvez personnaliser le comportement de répétition en utilisant cette propriété.

Explication :

repeat-example classe affiche l'image répétée à la fois verticalement et horizontalement.
repeat-x-example classe répète l'image uniquement horizontalement.
no-repeat-example classe affiche l'image une seule fois sans répétition.
space-example classe dispose les images de fond de manière uniforme avec un espacement égal entre elles.
round-example classe redimensionne automatiquement l'image de fond pour la répéter et remplir l'élément entier.

Valeurs qui peuvent être spécifiées

La propriété background-repeat peut recevoir les types de valeurs suivants.

repeat : L'image de fond est répétée le long de l'axe X (horizontal) et de l'axe Y (vertical). C'est la valeur par défaut.
repeat-x : L'image de fond est répétée uniquement le long de l'axe X (horizontal).
repeat-y : L'image de fond est répétée uniquement le long de l'axe Y (vertical).
no-repeat : L'image de fond n'est pas répétée et est affichée une seule fois.
space : L'image de fond est répétée à intervalles réguliers, avec une espacement égale entre les répétitions.
round : L'image de fond est répétée, mais sa taille est ajustée pour remplir l'ensemble de l'élément. L'image peut être redimensionnée.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Propriétés CSS liées au modèle de boîte Propriétés CSS liées à la décoration du modèle de boîte

Propriétés CSS liées à l'arrière-plan

YouTube Video

Création de HTML pour aperçu

Arrière-plan et Décoration

Propriété background-color

Explication :

Propriété background-image

Explication :

Types de valeurs pouvant être spécifiées

Points clés de la propriété background-image

Propriété background-position

Explication :

Types de valeurs pouvant être spécifiées

La propriété background-size

Explication :

Types de valeurs pouvant être spécifiées

Propriété background-repeat

Explication :

Valeurs qui peuvent être spécifiées

YouTube Video

Propriété `background-color`

Propriété `background-image`

Points clés de la propriété `background-image`

Propriété `background-position`

La propriété `background-size`

Propriété `background-repeat`