Répéter de fond dans CSS

Lorsque nous définissons une image d'arrière-plan sur n'importe quelle page Web par défaut, l'image sera placée dans le coin supérieur gauche et il sera répété dans les directions horizontales et verticales. CSS fournit une propriété de répétition d'arrière-plan pour gérer le comportement de répétition de l'image.

Nous pouvons effectuer les fonctionnalités suivantes en utilisant la propriété de répétition d'arrière-plan:

• sans répétition Évite la répétition de l'image.
• répéter-x répète une image dans une direction horizontale.
• répéter répète une image dans une direction verticale.
• espace répète l'image sans coupure et espace ajouté entre chaque répétition
• rond répète et étire l'image sans ajouter d'espace

Cet article discutera de toutes les valeurs de propriété arrière susmentionnées avec des exemples.

Exemple
Commençons par la propriété par défaut d'image d'arrière-plan.

L'extrait ci-dessus fournira la sortie suivante:

Ainsi, par défaut, la propriété d'image d'arrière-plan a répété l'image horizontalement et verticalement.

Valeur sans répétition

Voyons ce qui se passera lorsqu'une valeur "Non-répétition" sera affecté à la propriété de répétition de fond:

Maintenant, l'image d'arrière-plan n'apparaît qu'une seule fois. Cet exemple fournit la sortie suivante:

valeur répétée-x

Affectons maintenant «Répéter-x» à la propriété d'arrière-plan et notez comment cela fonctionne:

Observons l'impact de «Repeat-X» sur l'image d'arrière-plan dans la sortie suivante:

D'après la sortie ci-dessus, il est clair que «Répéter-x» répète l'image horizontalement uniquement.

valeur répétée

De même, attribuons le répéter Valeur à la propriété de répétition d'arrière-plan:

Le morceau de code donné ci-dessus produira la sortie suivante:

La sortie vérifie que répéter répété l'image verticalement uniquement.

valeur de l'espace

Utilisons le "espace" Valeur pour la propriété de répétition d'arrière-plan pour ajouter les espaces pair entre les images:

Le script ci-dessus fournira la sortie suivante:

valeur ronde

L'attribution de la valeur «ronde» à la propriété de répétition d'arrière-plan s'adaptera à l'image en fonction de la taille de l'écran:

En conséquence, nous obtiendrons la sortie suivante:

Répétition de l'image d'arrière-plan

Dans CSS, plusieurs images d'arrière-plan peuvent être ajoutées à un élément et l'exemple ci-dessous élaborera comment contrôler le comportement de répétition de plusieurs images à l'aide de la propriété de répétition d'arrière-plan:

Dans le code ci-dessus, la propriété d'image d'arrière-plan prend deux URL pour ajouter deux images d'arrière-plan. Dans la ligne suivante, la propriété de répétition d'arrière-plan spécifie également deux valeurs i.e. répéter-y, répéter-x. Repeat-y répétera la première image verticalement tandis que Repeat-X répétera la deuxième image horizontalement:

Conclusion

La propriété de répétition d'arrière-plan contrôle le comportement de répétition de l'image d'arrière-plan. Il détermine si une image d'arrière-plan se répétera ou non si oui alors comment, je.e. verticalement ou horizontalement.

Cet article a fourni un aperçu approfondi de la propriété de répétition d'arrière-plan dans CSS. Tout d'abord, il détermine quelles sont les valeurs qui peuvent être attribuées à la propriété de répétition d'arrière-plan. Par la suite, il a expliqué le fonctionnement de chaque valeur de répétition d'arrière-plan en détail avec les exemples.