background-repeat - Propriété CSS
Résumé des caractéristiques de la propriété background-repeat
repeat
| no-repeat
| repeat-x
| repeat-y
| round
| space
repeat
background-repeat
passe d'une valeur à l'autre sans transition.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
.
Syntaxes pour background-repeat
.
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: round space;
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 combinerround
etspace
, 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.
- background-repeat:
initial
; background-repeat:inherit
; background-repeat:revert
; background-repeat:revert-layer
; background-repeat:unset
;La valeur initiale est :
.repeat
Manipulation de la propriété background-repeat
par programme.
Les exemples de code s'appliquent à l'élément ci-dessous.
Les modifications de la valeur de background-repeat
sont immédiatement répercutées sur l'affichage.
Modifier la valeur de background-repeat
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).
function setBackgroundRepeat(el) {
el.style['background-repeat']='no-repeat';
// ou
el.style.backgroundRepeat='no-repeat';
}
Lire en Javascript la valeur de background-repeat
.
Ce code récupère la valeur de background-repeat
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.
function getBackgroundRepeat(el) {
alert(el.style['background-repeat']);
// ou
alert(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é.
function getCalcBackgroundRepeat(el) {
alert(window.getComputedStyle(el).getPropertyValue('background-repeat'));
}
Modifier la valeur de la propriété background-repeat
avec JQuery.
function setBackgroundRepeat(el) {
$(el).css('background-repeat','space');
// ou
$(el).css('backgroundRepeat','space');
}
Lire la valeur calculée de la propriété background-repeat
avec JQuery.
function getCalcBackgroundRepeat(el) {
alert($(el).css('background-repeat'));
// ou
alert($(el).css('backgroundRepeat'));
}
Simulateur.
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é et prise en charge par les navigateurs.
La plupart des navigateurs traitent correctement la propriété background-repeat
et ses différentes valeurs.
background-repeat
.
background-repeat
.
round
et space
avec la propriété background-repeat
.
background-repeat
round
space
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que background-repeat
.
Les spécifications CSS éditées par le W3C sont organisées en modules. background-repeat
fait partie du Module CSS - Arrière-plans et bordures (CSS Backgrounds and Borders Module). Les définitions suivantes sont également décrites dans ce même module.