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.Per grammar : sérialisation dans l'ordre de la syntaxe.Schéma de la syntaxe de background-repeat.
background-repeat.Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Télécharger le schéma en SVG.
Description des termes utilisés sur le schéma :
- 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 la zone d'arrière-plan.
background-repeat:space;background-repeat:round;
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, sans changement de la taille d'origine de l'image.
repeat - 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.no-repeat - background-repeat: repeat-x;
L'image d'arrière-plan est répétée uniquement dans le sens horizontal.
repeat-x - background-repeat: repeat-y;
L'image d'arrière-plan est répétée uniquement dans le sens vertical.
repeat-y - 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 la zone d'arrière-plan.
space - 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.
round - 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.space round - 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.
no-repeat,repeat - background-repeat: initial; (
repeat) background-repeat: inherit; background-repeat: revert; background-repeat: revert-layer; background-repeat: revert-rule; background-repeat: unset;Consultez les pages suivantes pour plus de détails :
initial,inherit,revert,revert-layer,revert-rule,unset.
Exemple d'animation de background-repeat.
Pour cette animation, nous avons utilisé une technique un peu spéciale, nécessaire car il fallait animer non seulement la propriété
background-repeat, mais aussi le libellé, sur le pseudo-élément ::after. Pour cela, nous passons par des propriétés
personnalisées (ou variables).
Bien entendu la propriété background-repeat peut être animée de façon classique.
background-repeat: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');
Lire ou modifier la répétition de l'arrière-plan avec JQuery.
// Lire la valeur :
$('#id').prop('background-repeat');
// Écrire la valeur :
$('#id').prop('background-repeat', 'no-repeat');
$('#id').prop('{background-repeat': 'no-repeat'});
Avec JQuery, lire la valeur calculée de background-repeat.
let value = $('#id').css('background-repeat');
D'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. Cependant, si vous tentez d'affecter une valeur incorrecte,
la valeur affectée sera nulle, et la valeur calculée sera la valeur initiale de la propriété (repeat).
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.
Tous les navigateurs modernes 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
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Safari
Safari sur IOS
Opéra
Chrome
Edge
Firefox
Chrome pour Androïd
Samsung Internet
Androïd Brower
Firefox pour Androïd
KaiOS Browser
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-repeatDé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-repeatAcceptation 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
Le niveau 3 de la spécification décrit en plus comment positionner le fond par rapport à la zone d'arrière-plan, et comment le découper.
Concernant les bordures, la notion de bordure image est introduite, ainsi que la notion d'arrondi d'angle et d'ombrage de boîte.Concernantbackground-repeatAjout 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 :