Background-repeat - Propriété CSS

background-repeat

Résumé des caractéristiques de la propriété `background-repeat`

Description rapide

Définit comment est répétée l'image d'arrière-plan.

Statut

Standard

Utilisable sur

HTML

Valeurs prédéfinies

Pourcentages

Ne s'appliquent pas.

Valeur initiale

repeat

Héritée par défaut

Non.

Type d'animation

Discrète : lors d'une animation, la propriété background-repeat passe d'une valeur à l'autre sans transition.

Module W3C

Module CSS - Arrière-plans et bordures

Références (W3C)

🡇

🡅

CSS Backgrounds and Borders Module Level 3

Statut du document: CR (document candidat à la recommandation)

Cascading Style Sheets specification - Version 1

Statut du document: DEPR (Ancienne spécification, déclarée obsolète)

Schéma de la syntaxe de `background-repeat`.

Schéma syntaxique de la propriété background-repeat
Cliquez sur le schéma pour plus de détails sur les valeurs

Légende :

Dans le cas d'arrière-plans multiples, on énumère plusieurs valeurs séparées par une virgule.

Description de la propriété `background-repeat`.

background-repeat définit comment l'image d'arrière-plan est répétée sur la surface de l'élément.

Pour une présentation générale des possibilités des arrière-plans, reportez-vous à la page background.

Valeurs pour `background-repeat`.

background-repeat: repeat;

Valeur par défaut. L'image d'arrière-plan est répétée sur toute la surface de l'élément, sans changement de la taille d'origine de l'image.
background-repeat: no-repeat;

L'image d'arrière-plan n'est affichée qu'une seule fois. Son emplacement est défini par la propriété background-position.
background-repeat: repeat-x;

L'image d'arrière-plan est répétée uniquement dans le sens horizontal.
background-repeat: repeat-y;

L'image d'arrière-plan est répétée uniquement dans le sens vertical.
background-repeat: space;

L'image d'arrière-plan est répétée tant que c'est possible sans la couper. Les images affichées sont réparties sur la surface de l'élément.
background-repeat: round;

L'image d'arrière-plan est répétée tant que c'est possible sans la couper. Les images affichées sont étirées pour couvrir la surface de l'élément.
background-repeat: space round;

Deux valeurs peuvent être indiquées, séparées par un espace. La première correspondant à la répétition dans le sens horizontal, et la deuxième dans le sens vertical.
Néanmoins cette possibilité d'indiquer deux valeurs n'est utile que pour combiner round et space, chacune des autres valeurs impliquant à elle seule les deux directions.
background-repeat: round, repeat, repeat-x;

Lorsque plusieurs valeurs sont spécifiées, séparées par des virgules, elles s'appliquent à des arrière-plans multiples. Voir à ce sujet la page sur les arrière-plans multiples.

Valeurs globales
(communes à toutes les propriétés)


background-repeat: initial  (repeat)
background-repeat: inherit
background-repeat: revert
background-repeat: revertLayer
background-repeat: unset

Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Accéder à la propriété `background-repeat` par programme.

Modifier la répétition de l'arrière-plan en Javascript.

En Javascript, voici comment modifier la valeur de background-repeat. Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots), et une autre syntaxe avec la notation en camel-case (une majuscule pour séparer les mots).


	let el = document.getElementById('id');
	el.style['background-repeat'] = 'no-repeat';
	// ou
	let el = document.getElementById('id');
	el.style.backgroundRepeat = 'no-repeat';

Lire en Javascript la répétition de l'arrière-plan.

Ce code récupère la valeur de background-repeat si elle a été affectée directement à l'élément lui-même en utilisant l'attribut style du HTML, et non pas en passant par un sélecteur CSS.


	let el = document.getElementById('id');
	let value = el.style['background-repeat'];
	// ou
	let el = document.getElementById('id');
	let value = el.style.backgroundRepeat;

Lire la valeur calculée de `background-repeat` en Javascript.

La valeur calculée est celle qui résulte de l'évaluation de la cascade des héritages. Cela peut être la valeur affectée avec l'attribut HTML style, une valeur affectée via un sélecteur CSS, une valeur héritée, ou encore la valeur initiale de la propriété (repeat dans le cas de background-repeat).


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('background-repeat');

Modifier la répétition de l'arrière-plan avec JQuery.


 $('#id').css('background-repeat', 'no-repeat');
 // ou
 $('#id').css('backgroundRepeat', 'no-repeat');

Lire la répétition de l'arrière-plan avec JQuery.


	let value = $('#id').css('background-repeat');

Autres exemples de code.

D'autres exemples de code pour manipuler CSS avec Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous affichent soit la valeur affectée de la propriété background-repeat, soit la valeur calculée. Dans le cas de cette propriété cela ne fera pas de différence car elle n'accepte que des valeurs prédéfinies.

Exemple interactif avec la propriété `background-repeat`.

Pour bien visualiser toutes les implications de background-repeat, vous pouvez réduire la largeur de la fenêtre du navigateur et observer comment se comporte l'image d'arrière-plan.

Compatibilité des navigateurs avec `background-repeat`.

La plupart des navigateurs traitent correctement la propriété background-repeat et ses différentes valeurs.

Colonne 1

Support de la propriété background-repeat définissant comment est répétée l'image d'arrière-plan.

Porpriété
background-repeat

Estimation de la prise en charge globale.

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété `background-repeat`.

CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1

Définition initiale de la propriété background-repeat dans la première version du langage CSS.

17 Novembre 1995
Document de travail.
12 Novembre 1996
Proposé à la recommandation.
17 Décembre 1996
Recommandation.
13 Septembre 2018
Ancienne spécification, déclarée obsolète.
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

Acceptation de la valeur inherit.

04 Novembre 1997
Document de travail.
24 Mars 1998
Proposé à la recommandation.
11 Mai 1998
Recommandation.
Module CSS - Arrière-plans et bordures - Niveau 3

Ajout des valeurs space et round pour background-repeat.

02 Août 2002
Document de travail.
17 Décembre 2009
Candidat à la recommandation.

Voir aussi, au sujet des arrière-plans.

Tout ce qui concerne les arrière-plans et les bordures et décrit dans la spécification du W3C "CSS Backgrounds and Borders Module". Voici les principales propriétés décrites dans cette norme :