Introduction

Nous pouvons déterminer la taille de l’image d’arrière-plan à l’aide de la propriété background-size. Nous pouvons rendre l'image à gauche, étirée et adaptée à l'espace disponible. Il existe de nombreuses syntaxes pour l’implémentation de la propriété background-size. Nous pouvons définir la propriété background-size à l’aide de valeurs et de valeurs unitaires.

En valeurs unitaires, nous pouvons définir la propriété background-size sous forme de pourcentages ou de pixels. Nous pouvons également le définir à l’aide de la valeur globale. Nous pouvons l'implémenter à l'aide de la valeur globale grâce à l'aide de l'extrait ci-dessous.

menu des paramètres du téléphone Android

 .card-hero inherit 

Comprenons brièvement le sujet.

Valeurs des mots clés

Nous pouvons utiliser la valeur du mot-clé à l’aide de cover et contain. Nous pouvons modifier la taille de l’arrière-plan à l’aide de ces valeurs de mots-clés.

1. Couverture :

Nous pouvons définir la taille de l’arrière-plan à l’aide du mot-clé cover. Si nous définissons la taille de l'arrière-plan comme une couverture, alors l'image rentrera dans le conteneur sans laisser d'espace. Cela améliorera également l’image pour l’adapter à l’écran.

Comprenons cela à l'aide de l'exemple ci-dessous.

Exemple 1:

Code:

1nf 2nf 3nf

 Document body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f0f0f0; } .background-container { position: relative; width: 100vw; height: 100vh; background-image: url(&apos;https://e0.pxfuel.com/wallpapers/163/906/desktop-wallpaper-beautiful-nature-with-girl-beautiful-girl-with-nature-and-moon-high-resolution-beautiful.webp&apos;); background-size: cover; background-position: center; text-align: center; color: white; } .background-container h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); } <p>Where every step unveils a new wonder.</p> 

Sortir

Explication:

Dans le code ci-dessus, trois images d'arrière-plan sont combinées à l'aide de la propriété background-image. La propriété background-size spécifie les tailles de chaque image d'arrière-plan : 30 % de largeur pour la première image, 40 % de largeur pour la deuxième image et couverture pour la troisième image. La propriété background-position est définie différemment pour chaque image afin de créer une composition équilibrée.