Background-repeat - Propriété CSS
Résumé des caractéristiques de la propriété background-repeat
repeat | no-repeat | repeat-x | repeat-y | round | spacerepeatbackground-repeat passe d'une valeur à l'autre sans transition.Schéma de la syntaxe de background-repeat.
background-repeatCliquez 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 combinerroundetspace, 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.
background-repeat définissant comment est répétée l'image d'arrière-plan.background-repeatNavigateurs 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
Histoire de la propriété background-repeat.
-
CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1
Ce premier niveau de la spécification CSS décrit le mécanisme des feuilles de styles en cascade. Les auteurs et les lecteurs peuvent ajouter des styles aux documents. Principalement destiné à la mise en forme des documents HTML, CSS permet de définir les couleurs, les polices de caractères, la mise en forme du texte, les espacements (marges), etc. Le langage CSS est d'une compréhension aisée, lisible et facile à rédiger, il utilise les termes courants de la publication de bureau.
Concernantbackground-repeat. Définition initiale de la propriétébackground-repeatdans la première version du langage CSS.
17 Novembre 1995Document de travail.
12 Novembre 1996Proposé à la recommandation.
17 Décembre 1996Recommandation.
13 Septembre 2018Ancienne spécification, déclarée obsolète. -
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1
Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.
Concernantbackground-repeat. Acceptation de la valeurinherit.04 Novembre 1997Document de travail.24 Mars 1998Proposé à la recommandation.11 Mai 1998Recommandation. -
Module CSS - Arrière-plans et bordures - Niveau 3
Concernantbackground-repeat. Ajout des valeursspaceetroundpourbackground-repeat.02 Août 2002Document de travail.
17 Décembre 2009Candidat à 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 "Module CSS - Arrière-plans et bordures". Voici les principales propriétés décrites dans cette norme :